jQuery .toggle（）在带有选择选项的IE9上不起作用

Question

我有一个小问题。 我有两个依赖的下拉列表。 如果您先选择某项，然后再选择第二项，您应该会看到已过滤的选项。 在FF上一切正常，但是当我在IE9上尝试时，切换停止工作。 我有所有可见的选项。 我的代码：

HH1:
<select name="color">
    <option value="1">blue</option>
  <option value="2">red</option>
</select>

HH2:
<select name="size">
  <option value="0" data-shown="0" data-link="">Please select</option>  
  <option value="1" data-shown="1" data-link="link1">L</option>
  <option value="2" data-shown="1" data-link="link2">M</option>
  <option value="3" data-shown="2" data-link="link3">XL</option>
  <option value="23" data-shown="2" data-link="link4">XM</option>
</select>

我的jQuery代码：

$('select[name="color"]').change(function () {
    var number = parseInt($('option:selected', this).attr('value'));
    $('select[name="size"] option').each(function(){       
        if (parseInt($(this).attr('data-shown')) != 0){              
            $(this).toggle(false);           
            $(this).toggle(parseInt($(this).attr('data-shown')) == number);
        }else {
            $(this).attr('selected', true);
        }});
}).trigger('change');

如果您有解决方案，请帮忙。 .....我想知道是否应该将其放入准备文档的脚本中。

我的示例： http : //jsfiddle.net/KD7Q5/1/

Answer 1

ShankarSangoli的答案很好。 我要补充一点，如果您希望这些选项消失，则可以保留一个隐藏的select然后将选项复制出来并复制到可见的选项中。

演示： http ： //jsfiddle.net/XjShS/

在此示例中，我有一个名为hsize的select （隐藏大小...不要像我一样选择糟糕的名称）。 那有所有选择。 change处理程序触发时，它将清除size select中的选项，然后从hsize添加适当的hsize 。

Answer 2

IE不支持隐藏选项元素。 如果禁用对您有用，那么我建议您这样做。

带有禁用选项的工作演示-http: //jsfiddle.net/KD7Q5/3/

Answer 3

每次选择color元素时，动态地重新填充size元素可能会更好。 它是针对您的“问题”的跨浏览器解决方案，您无需处理隐藏选项。