更新选择多个

我正在尝试编写一个函数来更新“多个”选择（下面的第二个），这样当我选择Method1（从第一个选择）时，只有选项1A，1B和1C出现在第二个选择中，同样对于2A，2B ……仅当我选择Method2时。 有没有办法做到这一点。 请帮忙。 提前谢谢了。

 Method1 Method2   1A 1B 1C 2A 2B 2C  

Answer 1

我认为没有跨浏览器支持隐藏选择选项。

这是一种方法。 使用更像jQuery的处理事件的方法，因此您需要从HTML中删除内联onchange 。

试一试： http ： //jsfiddle.net/W9KvT/

 var options = [ ['1A','1B','1C'], ['2A','2B','2C'] ]; $('select[name=choices]').change(function() { var idx = $(this).children(':selected').index(); var set = ''; for(var i = 0, len = options[idx].length; i < len; i++) { set += '' + options[idx][i] + ''; } $('select[name=sub]').html(set); }).change(); 

如果您不想每次都动态生成这些，您可以创建每个选项字符串，并将它们保存在数组中，以类似的方式加载它们。

试一试： http ： //jsfiddle.net/W9KvT/1

 var options = [ '1A1B1C', '2A2B2C' ]; $('select[name=choices]').change(function() { var idx = $(this).children(':selected').index(); $('select[name=sub]').html(options[idx]); }).change(); 

---

编辑：正如@You所述 ，为了确保与禁用了javascript的浏览器的兼容性，最好在页面加载时提供所有可用选项。 然后，您可以使用上面的代码覆盖js浏览器。

在这种情况下，来自@ You的答案的元素将是一个很好的主意。

Answer 2

隐藏元素不是你应该做的事情，真的（因此，它在Webkit或IE中是不可能的）。 但是你可以禁用它们。 使用此HTML：

  Method 1 Method 2    1A 1B 1C   2A 2B 2C   

和jQuery：

 $(document).ready(function(){ $("#choices").change(function(){ $("#sub optgroup").attr("disabled", true); $("#sub optgroup#"+$(this).val()).attr("disabled", false); }); $("#choices optgroup:not(#"+$("#choices option:selected").val()+")").attr("disabled", true); }); 

你基本上会禁用不适用的选项，这是一种“正确”的方法。 （并使用 ，这就是它的用途！）

_{免责声明：我无法在Safari中使用它，但根据HTML4.01和HTML5规范，这应该有效。 我不确定发生了什么事。}