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

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 中有效。另一种可能的实现是清空选项列表并仅添加有问题的选项:

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

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

 orgalerts = alertselect.children();

Fiddle