我有一个表单,我正在尝试禁用或隐藏具有特定 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>
感谢您的帮助!
最佳答案
试试下面的代码:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
关于javascript - 选择表单中具有给定数据 ID 的所有选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48514598/