javascript - jquery/javascript 隐藏和显示元素依赖下拉列表

Question

我需要根据另一个下拉菜单的选定选项显示/隐藏一个选择下拉菜单上的选项。

我的意思是，当我选择“其他”时，将显示在花药下拉完整列表(男性和女性)中!!当我选择“工程师先生”时，将只显示“男性”当我选择“miss.engineer”时，将只显示“female”。

<select>
<option value="">Choose</option>
<option value="Mr">Mr. Engineer</option>
<option value="Miss">Miss. Engineer</option>
<option value="other">Other</option>

</select>

<select>
<!--Below shows when 'Other' is selected , and show otherwise-->
<option value="0">choose</option>

<!--Below shows when 'Mr. engineer' is selected jsut , and hidden otherwise-->
<option value="male">Male</option>

<!--Below shows when 'Miss. engineer' is selected just, and hidden otherwise-->
<option value="female">Female</option>

</select>

Answer 1

您可以使用 change 并执行以下操作:

$("#dropdownlist").change(function() {
   var control = $(this);

   if (control.val() == "Engineer") {
      $("#dropdownlist2").show();
   }
});

这是基于以下结构:

<select id="dropdown1">
   <option value="Mechanic">Mechanic </option>
   <option value="Engineer">Engineer</option>
 </select>

<select id="dropdown2" style="display:none">
   <option value="Item 1">Item 1 </option>
   <option value="Item 2">Item 2 </option>
 </select>

http://jsfiddle.net/zs3QG/