如何在jQuery中根据选中选项的Class动态显示对应下拉选项？

我懂你现在卡在哪了——已经成功拿到选中项的class变量actClass，但不知道怎么把它整合到jQuery选择器里实现动态匹配对吧？其实只要简单拼接选择器字符串就行，另外还要补个小细节：每次切换时最好先把drop2里的非默认选项都隐藏，再显示匹配项，不然之前的选项会一直留在那。

下面是修改后的完整可运行代码：

<!-- dropdown1 -->
<select id="drop1" class="class1" name="class1">
  <option selected="true" disabled="disabled">---</option>
  <option class="class1" value="Val1">Val1</option>
  <option class="class2" value="Val2">Val2</option>
  <option class="class3" value="Val3">Val3</option>
</select>

<!-- dropdown2 -->
<select id="drop2" class="class1" name="class1">
  <option selected="true" disabled="disabled">---</option>
  <option class="class1" value="yop1">yop1</option>
  <option class="class2" value="yop2">yop2</option>
  <option class="class3" value="yop3">yop3</option>
</select>

<script>
jQuery('#drop1').bind('change keyup', function() {
  var actClass = jQuery("#drop1 option:selected").attr('class');
  // 先隐藏drop2中所有可选择的选项（保留默认禁用提示）
  jQuery("#drop2 option:not(:disabled)").hide();
  // 通过字符串拼接，把变量整合到选择器中实现动态匹配
  jQuery("#drop2 option." + actClass).show();
});
</script>

核心细节说明： #

• 动态选择器拼接：把固定的.class2替换成." + actClass，这样jQuery就能根据变量里的class值，精准匹配drop2中对应的选项了。
• 先隐藏再显示：添加jQuery("#drop2 option:not(:disabled)").hide();是为了避免切换drop1选项时，drop2里之前显示的选项不会自动隐藏，保证每次只有当前匹配的选项可见。
• 事件覆盖：bind('change keyup')同时支持鼠标选择和键盘操作两种场景，让交互更完整。

如果你的场景里有多个class或者特殊选项需要处理，还可以再调整选择器，但这个方案已经能解决你当前的核心需求啦。

内容的提问来源于stack exchange，提问作者prc