Question

我正在使用一个简单的小脚本，该脚本应允许下拉列表启用/禁用带有相关数据的第二个下拉列表，但它无法正常工作。

以下是所有代码和html：

$("[name='pet_type']").change(function () {
    var pet_type = $(this).val();
    $("[name='breed']").removeAttr("disabled");
    $("select[name='breed'] > option").each(function () {
        var o = $(this);
        console.log(o.data('pet-type'));
        console.log(pet_type);
        if (o.data('pet-type') === pet_type) {
            o.hide();
        } else {
            o.show();
        }
    });
});

HTML：

<select name="pet_type">
    <option></option>
    <option value="Cat" data-pet-type="Cat">Cat</option>
    <option value="Dog" data-pet-type="Dog">Dog</option>
</select>
<select name="breed" disabled="disabled">
    <option></option>
    <option data-pet-type="Cat" disabled="disabled">--- Cat Breeds</option>
    <option value="Chartreux" data-pet-type="Cat">Chartreux</option>
    <option value="Cymric" data-pet-type="Cat">Cymric</option>
    <option data-pet-type="Dog" disabled="disabled">--- Dog Breeds</option>
    <option value="Affenpinscher" data-pet-type="Dog">Affenpinscher</option>
    <option value="Anatolian Shepherd Dog" data-pet-type="Dog">Anatolian Shepherd Dog</option>
    <option value="Other">Other</option>
</select>

所有发生的事情是当你点击一个选项是第一个下降时，它只是启用第二个下拉列表，包含猫和狗的所有数据，实际上它应该只为所选的1选项启用数据。 / p>

如果有人对于为什么这种方法不能正常工作有任何想法，那将非常感激。

Answer 1

问题很简单，您无法在大多数浏览器中隐藏单个option标记。相反，您可以disable them：

o.prop('disabled',true); // or false

或.detach()不需要的选项and re-attach them later：

window.all_options = $("[name='breed'] > option").detach(); // global variable

$("[name='pet_type']").change(function () {
    var pet_type = $(this).val();
    $("[name='breed']").removeAttr("disabled").append(window.all_options);
    $("select[name='breed'] > option").each(function () {
        var o = $(this);
        if (o.data('pet-type') !== pet_type) {
            o.detach();
        }
    });
});

未按预期显示或隐藏选择菜单选项

1 个答案: