Javascript 选择表单中具有给定数据id的所有选项

我有一个表单，我正试图禁用或隐藏具有特定数据id属性的select表单元素中的选项。示例表格：

<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>

选择1
选择2
选择3
选择1
选择2
选择3

我想隐藏（对于不支持隐藏的浏览器禁用）数据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>

$（文档）.ready（函数（）{
//隐藏不可用的选项
var不可用=不可用；
$（“#fuu选择选项”）。每个（函数（事件）{
if（$（this）.attr（“数据id”）！==不可用）{
$（this.hide（）.prop（'disabled'，true）；
}
});
});

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

$（文档）.ready（函数（）{
//测井测试
var不可用=不可用；
$（“#fuu选择选项”）。每个（函数（事件）{
if（$（this）.attr（“数据id”）！==不可用）{
var loggedID=$（this.attr（“数据id”）；
console.log（不可用+”：“+loggedID）；
}
});
});

谢谢你的帮助

在quotes

var unavailable=“notAvailable”下提供此信息

将条件更改为

$（this）.attr（“数据id”）==不可用

示例：

$（文档）.ready（函数（）{
//隐藏不可用的选项
var unavailable=“notAvailable”；
$（“#fuu选择选项”）。每个（函数（事件）{
if（$（this）.attr（“数据id”）==不可用）{
$（this.hide（）.prop（'disabled'，true）；
}
});
});

选择1
选择2
选择3
选择1
选择2
选择3
尝试以下代码：

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

试试这个：


$（文档）.ready（函数（）{
$（'select option'）。每个（函数（）{
if（$（this.attr（'data-id'）=='notAvailable'）{
$（this.prop（'disabled'，true）；
}
});
});

选择1
选择2
选择3
选择1
选择2
选择3
对var unavailable=“notAvailable”进行报价；notAvailable，notAvailable是字符串文字，所以将它们用作字符串并使用它们。例如：“notAvailable”，“notAvailable”。谢谢，这个解决方案确实非常有效，我很欣赏这个工作示例。我选择Hanif的答案是因为它使用更少的代码，而对于我最终要做的事情（创建一个显示/隐藏“notAvailable”的切换），他的方法更干净。我对你的答案投了更高的票，因为它工作得很好。
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);