javascript - 选择表单中具有给定数据 ID 的所有选项

Question

我有一个表单，我正在尝试禁用或隐藏具有特定 data-id 属性的选择表单元素中的选项。示例表单:

<fieldset id="fuu">
    <select name="bar1">
        <option value="option1" data-id="available">Option 1</option>
        <option value="option2" data-id="notAvailable">Option 2</option>
        <option value="option3" data-id="available">Option 3</option>
    </select>

    <select name="bar2">
        <option value="anotherOption1" data-id="available">Option 1</option>
        <option value="anotherOption2" data-id="notAvailable">Option 2</option>
        <option value="anotherOption3" data-id="available">Option 3</option>
    </select>
</fieldset>

我想隐藏(并禁用不支持隐藏的浏览器)data-id 为“notAvailable”的选项。

这是我尝试过的:

<script>
    $(document).ready(function () {
        //hide unavailable options
        var unavailable = notAvailable;
        $('#fuu select option').each(function (event) {
            if ($(this).attr("data-id") !== unavailable) {
                $(this).hide().prop('disabled', true);
            }
        });
    });
</script>

我的选择器似乎失败了，因为当我用下面的代码记录结果时，我得到了 127 次“notAvailable : undefined”(我的表单中的每个选项一个)

<script>
    $(document).ready(function () {
        //test by logging
        var unavailable = notAvailable;
        $('#fuu select option').each(function (event) {
            if ($(this).attr("data-id") !== unavailable) {
                var loggedID = $(this).attr("data-id");
                console.log(unavailable + " : " + loggedID);
            }
        });
    });
</script>

感谢您的帮助!

Answer 1

试试下面的代码:

$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);