Question

我有一个表单，我试图在具有特定data-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>

我想隐藏（并禁用不支持隐藏的浏览器）数据ID为＆＃34; notAvailable＆＃34;的选项。

以下是我尝试的内容：

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

我的选择器似乎失败了，因为当我在下面的代码中记录结果时，我得到了＃34; notAvailable：undefined＆＃34; 127次（我的表格中每个选项一个）

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

Answer 2

试试这个：

＆＃13;

Tools > Developer > New Plugin...

＆＃13;

$(document).ready(function(){
   $('select option').each(function(){
   
    if($(this).attr('data-id')=='notAvailable'){
      $(this).prop('disabled',true);
    }
   });
});

＆＃13;

Answer 3

在引号var unavailable = "notAvailable";
将条件更改为$(this).attr("data-id") == unavailable

示例：

$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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的所有选项

3 个答案: