根据选择框的选项禁用输入字段

Question

我想要隐藏输入元素，直到选择了选择框值，或者除非选择了选择框值，否则禁用输入字段。如果这是有道理的。

下面是一些代码，我们希望将其应用于。

<div class="s_row_2 clearfix"> 
      <label><strong>Country</strong></label> 
       <select id="country" name="country" style="width: 212px;"> 
       <option value="null" selected="selected" >--- Please Select---</option> 

       <option value="nol">--- Not on this list ---</option> 
       <option value="New Zealand">New Zealand</option> 
       <option value="United Kingdom">United Kingdom</option> 
       <option value="United States">United States</option> 
       <option value="France">France</option> 
       <option value="Germany">Germany</option> 
       <option value="Spain">Spain</option> 
       <option value="Italy">Italy</option> 
       <option value="Canada">Canada</option> 

       </select> 

      <label class="required rightish"><strong>Other Country</strong></label><input type="text" name="othercountry" id="othercountry" size="30" /> 
     </div> 

如果用户选择（nol - 不在列表中）“不在此列表中”选择元素中的选项。

然后我们可以使其他国家的输入框，必填字段。或者可能更好地隐藏此输入字段，并且仅在选择了“nol”值时才显示。

Answer 1

可以绑定一个事件侦听器change事件，并检查select的value：

$("#country").change(function() { 
    if(this.value === "nol") { 
     $("#othercountry").show(); 
    } 
}); 

很明显，你可能会想扩展，如果选择其他值再次隐藏输入，并也许还会显示/隐藏label元素。