时间戳

首页 > 解决方案 > JQuery：通过数据属性 LESS 从选择中删除选项

jquery - JQuery：通过数据属性 LESS 从选择中删除选项

问题描述

我需要请你帮忙。
我有以下选择：

<select id="some_id">
    <option value="1" data-cost_level="1">option A</option>
    <option value="4" data-cost_level="2">option B</option>
    <option value="9" data-cost_level="3">option C</option>
</select>

现在我需要删除（使用 JQuery）所有 data-cost_level LESS THAN 3 的选项。
是否可以使用单行指令而不循环整个选择？

标签： jqueryhtml

解决方案

您的尝试：

// split to 3 lines from 1 so it's easier to see here
$("#some_id").filter(function(){ 
    return $(this).attr('data-cost_level') < "3" }
).remove();

很接近。

首先，您需要s 而不是.filter，因此更改为optionselect

$("#some_id > option")

接下来，如果你比较字符串，你不会得到数字比较，("21"<"3")===true所以你需要转换为 int，有多种方法可以做到这一点，最简单的方法是使用它来.data()代替.attr()，在 jquery 中，将自动转换为正确的数据类型（然后与 int 比较），即：

$(this).data("cost_level") < 3

包括一个测试工具，这给出了：

$("#btn").click(() => {
  var val = $("#inp").val() * 1;

  $("#some_id > option").filter(function() {
    return $(this).data("cost_level") < val;
  }).remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="some_id">
  <option value="1" data-cost_level="1">option A</option>
  <option value="4" data-cost_level="2">option B</option>
  <option value="9" data-cost_level="3">option C</option>
</select>
<hr/>
<input id='inp' value='3'><button type='button' id='btn'>clear</button>

推荐阅读