jQuery显示/隐藏选项选择字段显示框，我试图显示在所有其他选项

我有这个jQuery脚本:

// 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

基本上，当Other选项被选中时，我想从timeFieldArray中获取正确的位置，并显示与该字段相关的框。问题是，当我选择另一个选项字段，而不是OtherFieldvalue这些仍然显示。有什么建议吗?

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>