Question

I have this jQuery script:

// sorting the names of the fields we're hiding
var timeFieldArray = ["reserveTimeOfDay","choice1TimeOfDay","choice2TimeOfDay","choice3TimeOfDay"];
// show/hide an optional field for the time of day 
$.each(timeFieldArray, function(index, fieldName) 
{   // Start by hiding everything
    $("#"+ fieldName + "Optional").hide();
    $(".toValidate select[name='"+fieldName+"']").click(function() { 
        // is it selected & the correct value? 
        if($("option[value='OtherField']").is(":selected")){
            $("#"+ fieldName + "Optional").show("fast");
            $("input[name='"+fieldName+"Optional']").addClass("required"); 
        } else {
            $("input[name='"+fieldName+"Optional']").removeClass("required");
            $("#"+ fieldName + "Optional").hide();
        }
    }); // closing .Click
}); // closing .Each

Basically, when the Other option is selected I want to take the correct position from timeFieldArray and show the box that relates to that field. The problem is when I select another option field that is not the OtherFieldvalue these still show up. Any suggestions?

My HTML:

<ul>
    <li>
        <p><strong>First Choice</strong></p>
        <p><label for="choice1Date">Date</label><input type="" name="choice1Date" class="dateField required" /></p>
        <label for="choice1TimeOfDay">Time Of Day</label>
        <select name="choice1TimeOfDay">
            <option value="am"> Morning (A.M.)</option>
            <option value="pm"> Afternoon (P.M.)</option>
            <option value="OtherField"> Other </option>                     
        </select>
        <div id="choice1TimeOfDayOptional">
            Other: <input type="text" name="choice1TimeOfDayOptional" /> 
        </div>
    </li>
    <li>
    <p><strong>Second Choice</strong></p>
        <p><label for="choice2Date">Date</label><input type="" name="choice2Date" class="dateField required" /></p>
        <label for="choice2TimeOfDay">Time OF Day</label>
        <select name="choice2TimeOfDay">
            <option value="am"> Morning (A.M.)</option>
            <option value="pm"> Afternoon (P.M.)</option>
            <option value="OtherField"> Other </option>                     
        </select>
        <div id="choice2TimeOfDayOptional">
           Other: <input type="text" name="choice2TimeOfDayOptional" /> 
        </div>
    </li>
    <li>
        <p><strong>Third Choice</strong></p>
        <p><label for="choice3Date">Date</label><input type="" name="choice3Date" class="dateField required" /></p>
        <label for="choice3TimeOfDay">Time Of Day</label>
        <select name="choice3TimeOfDay">
            <option value="am"> Morning (A.M.)</option>
            <option value="pm"> Afternoon (P.M.)</option>
            <option value="OtherField"> Other </option>                     
        </select>
        <div id="choice3TimeOfDayOptional">
           Other: <input type="text" name="choice3TimeOfDayOptional" /> 
        </div>                                    
    </li>
</ul>

Answer 1

You are checking for some option with the Other value that’s selected. Instead, you should check for the current select box whether it has the Other value selected.

So:

if($(this).find("option[value='OtherField']").is(":selected")) {
// find selected option within the select box that's changing

Also I’m not sure but on Chrome I had to use .change instead of .click.

Lastly, on a personal note, when fading in it might serve a better UI experience if you also fade out – now it disappears immediately. Just an idea 🙂

http://jsfiddle.net/Dd2YM/1/