基于另一个选择列表有条件地删除/禁用/隐藏选择列表选项。需要所有浏览器支持

Question

HTML

<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
  <option value="Account" selected>Account</option>
  <option value="User">User</option>
</select></span>

<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
  <option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
  <option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>

所以这是其他人处理的现有代码，不再是资源。

这个小示例只是根据第一个选择列表中的选定项目更改第二个选择列表。这在 FF 和 Chrome 中工作得很好，经过一番挖掘后，我被告知不能在 IE 的选择列表中隐藏选项。

我也阅读了这个问题here，但仍然无法让它适用于 IE。任何人都可以建议吗？谢谢。

jsfiddle

Answer 1

链接帖子中显示的删除而不是隐藏似乎在 IE 中有效。另一种可能的实现是清空选项列表并仅添加有问题的options：

 var alertselect, modselect, orgalerts;
 var showAlerts = function (module) {
     alertselect.empty().append(
        orgalerts.filter(function () {
         return $(this).data('params').module === module;
     }));
 };

当然，要让它工作，你必须存储原始选项：

 orgalerts = alertselect.children();

Fiddle