Question

我有一个小问题。我有两个依赖的下拉列表。如果你首先选择sth，那么你应该看到过滤后的选项。一切都在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/

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

Answer 2

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

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

Answer 3

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

JQuery .toggle（）没有使用选择选项在IE9上工作

3 个答案: