2

我需要在一个选择下拉菜单上显示/隐藏选项，这取决于另一个下拉菜单的选择选项。

我的意思是，当我选择“其他”时，将显示在花药下拉完整列表中（男性和女性）！当我选择“工程师先生”时，只会显示“男性”，当我选择“工程师小姐”时，只会显示“女性”。

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

2 回答 2

0

您可以使用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/

于 2013-03-16T12:45:15.090 回答
0

在这种情况下，我通常求助于 HTML 本身中的选择之间的映射值，并使用来自 JS 的这些映射，而不是在 JS 中硬连接它。

例如：appliesto属性映射 select2 中的选项，这些选项适用于 select1 中的每个选项。

<select id="one">
  <option>Choose</option>
  <option appliesto="male">Mr. Engineer</option>
  <option appliesto="female">Miss. Engineer</option>
  <option appliesto="other">Other</option>
</select>

<select id="two">
  <option type="other">choose</option>
  <option type="male">Male</option>
  <option type="female">Female</option>
</select>

并使用这些映射通过 JS 根据需要显示/隐藏。

$('select#one').change(function() {
    var selType = $(this).find('option:selected').attr('appliesto');
    $('select#two option[type="'+selType+'"]').prop('selected', true);
});

检查这个演示：http: //jsfiddle.net/xGJRP/1/

当然，您可能需要进一步微调，但我相信您明白了。

于 2013-03-16T12:53:17.910 回答