Question

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

<select name="choices" onchange="updatesub()">
    <option>Method1</option>
    <option>Method2</option>
</select>

<select multiple="multiple" name="sub">
    <option>1A</option>
    <option>1B</option>
    <option>1C</option>

    <option>2A</option>
    <option>2B</option>
    <option>2C</option>
</select>

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 += '<option>' + options[idx][i] + '</option>';
    }
    $('select[name=sub]').html(set);
}).change();

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

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

var options = [
    '<option>1A</option><option>1B</option><option>1C</option>',
    '<option>2A</option><option>2B</option><option>2C</option>'
];

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

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

@ You的回答中的<optgroup>元素在这种情况下是一个很好的主意。

Answer 2

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

<select id="choices">
    <option value="grp1">Method 1</option>
    <option value="grp2">Method 2</option>
</select>

<select id="sub" multiple>
    <optgroup label="Method 1" id="grp1">
        <option>1A</option>
        <option>1B</option>
        <option>1C</option>
    </optgroup>
    <optgroup label="Method 2" id="grp2">
        <option>2A</option>
        <option>2B</option>
        <option>2C</option>
    </optgroup>
</select>

和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);
});

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

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

更新选择多个

2 个答案: