jquery - 使用 jQuery 按数据属性操作选项

Question

我有一个带有选项的下拉菜单，我想根据它们的 data-* 属性使用 jQuery 更改它们(在这种情况下，隐藏所有选项，然后仅显示具有 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

您可以将“显示”值作为选择器传递:

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>