Question

我有一个带有选项的下拉菜单，我想根据他们的data- *属性更改这些（在这种情况下，隐藏所有选项，然后只显示具有X属性的选项）

下拉：

<button onclick="changeopts(10)">click me</button>

<select id="testsel">
        <option data-test="10" value="0">opt1</option>
        <option data-test="11" value="5">opt2</option>
        <option data-test="12" value="200">opt3</option>
</select>

使用Javascript：

function changeopts(show){
       var opts = document.getElementById("testsel").options;

       $(opts).prop('disabled',true);
       $(opts).css('display','none');

       if ($(opts).attr('data-test')==show){
             $(opts).prop('disabled',false);
             $(opts).css('display','inline');
       }
}

这不起作用。我假设if语句不能同时查看所有选项。我希望尽可能避免遍历所有选项。

我使用的解决方案：

function changeopts(show){
            var opts = document.getElementById("testsel").options;

            $(opts).prop('disabled',true);
            $(opts).css('display','none');

            $('#testsel option[data-test="'+show+'"]').prop('disabled',false);
            $('#testsel option[data-test="'+show+'"]').css('display','inline');
        }

Answer 1

这是因为您没有过滤元素，其数据属性值等于变量show。由此，它使所有选项元素都启用并可见。

您需要使用.filter()函数来过滤选项集中的元素，然后启用它并显示：

$(opts).filter(function(){
  return $(this).data("test")  ==  show;
}).prop('disabled', false).show();

工作代码段

＆＃13;

function changeopts(show){
       var opts = document.getElementById("testsel").options;

       $(opts).prop('disabled',true);
       $(opts).css('display','none');

       $(opts).filter(function(){
         return $(this).data("test")  ==  show;
       }).prop('disabled', false).show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button onclick="changeopts(10)">click me</button>

<select id="testsel">
        <option data-test="10" value="0">opt1</option>
        <option data-test="11" value="5">opt2</option>
        <option data-test="12" value="200">opt3</option>
</select>

＆＃13;

Answer 2

您可以将“show”值作为选择器传递：

function changeopts(show) {
  $('#testsel option').hide();
  $('#testsel option[data-test="'+show+'"]').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>

<select id="testsel">
  <option data-test="10" value="0">opt1</option>
  <option data-test="11" value="5">opt2</option>
  <option data-test="12" value="200">opt3</option>
</select>

<强>加成

使用您的实际代码，我看到即使您过滤了选项，仍然选择了默认的第一个选项，您可以添加另一行代码来将匹配的第一个元素设置为默认值：

function changeopts(show) {
  $('#testsel option').hide();
  $('#testsel option[data-test="'+show+'"]').show();
  $('#testsel option[data-test="'+show+'"]').first().attr('selected',true)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeopts(12)">click me</button>

<select id="testsel">
  <option data-test="10" value="0">opt1</option>
  <option data-test="11" value="5">opt2</option>
  <option data-test="12" value="200">opt3</option>
  <option data-test="12" value="210">opt3.1</option>
</select>

使用jQuery通过data属性操作选项

2 个答案: