javascript - 我的 javascript 中隐藏选择选项时出错

Question

我有两个属性选择，第二个的内容取决于第一个的选择。如果选择成人，我希望显示所有标题选项。如果选择 Child，我只想显示 Mr 或 Miss。我写了一个简单的 javascript 来隐藏不需要的选项，这几乎可以正常工作。如果我选择 Child，则不会显示不需要的选项。如果我然后将其更改为成人，则会显示所有选项。但是，如果我先选择成人，下拉菜单会分开，只给我一个选项值列表。

我用的javascript是

$("#attrib-1").change(function () {
var id = $(this).find("option:selected").attr("value");
switch (id) {
    case "3":
        $("#attrib-2 option[value='6']").wrap('<span/>');
        $("#attrib-2 option[value='7']").wrap('<span/>');
        $("#attrib-2 option[value='9']").wrap('<span/>');
        $("#attrib-2 option[value='10']").wrap('<span/>');
        break;
}

switch (id) {
    case "2":
        $("#attrib-2 option[value='6']").unwrap();
        $("#attrib-2 option[value='7']").unwrap();
        $("#attrib-2 option[value='9']").unwrap();
        $("#attrib-2 option[value='10']").unwrap();
        break;
}

});

fiddle 可以在这里找到。 http://jsfiddle.net/2t7oj91d/如果 Adult 是首选，我该怎么做才能防止这种情况发生？

Answer 1

option 元素不能包含在 select 以外的任何内容中。通过展开它们，您实际上是在强制渲染器将它们从 select 中移除，这就是您的 HTML 似乎无法正常工作的原因。另请注意，并非所有浏览器都很好地支持隐藏/显示 option 元素。

考虑到这一点，启用/禁用这些选项会更好地为您服务。为此，您可以向仅适用于 Adult 选项的 option 元素添加一个类，并根据需要禁用/启用它们。试试这个:

$("#attrib-1").change(function () {
    var id = $(this).val();
    $("#attrib-2 option.adult").prop('disabled', id == 3);
});

<select name="id[2]" id="attrib-2">
    <option value="4">Please Select</option>
    <option value="5">Mr</option>
    <option class="adult" value="6">Mrs</option>
    <option class="adult" value="7">Ms</option>
    <option value="8">Miss</option>
    <option class="adult" value="9">Dr</option>
    <option class="adult" value="10">Prof</option>
</select>

Updated fiddle