Question

I am wondering if someone could help me understand how I can achieve this. I want to show two input boxes only when a certain value in a select box is chosen using javascript (inc jquery).

My select box has this value:

<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>

My input box has this value:

<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">

In Pseudo code I am after something like this:

<if select name="menu-168" value = "Commerical">
<add css property ".hidden" to input name="text-708">
</if>

My javascript knowledge is so poor, would anyone mind showing me how this is done? This is a JSfiddle with the relevant HTML:

http://jsfiddle.net/K9zGP/

Answer 1

You can use .on() to attach a listener on the select, to listen for a change event. With the change-event listener you can act whenever someone changes the selected option. Then you can use .toggle() to show/hide the input, depending on what the user has chosen in the select-list.

Something like this:

​$(function(){
    $("select[name='menu-168']").on("change", function (){           
        $("input[name='text-708']").toggle($(this).val() !== "Commercial");
    });
});​

Working example

In this example I use attribute selectors to select your elements, because there is nothing more exact to go on, but you could get slightly better performance by adding ID’s to the relevant elements and use those for the selectors instead.