JQuery: удаление опции из выбора по атрибуту данных МЕНЬШЕ, чем

Question

Мне нужно попросить вас о помощи.
У меня есть следующие команды select:

<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.
Возможно ли это с помощью однострочной инструкции без циклического перебора всего выбора?

Answer 1

Попробуйте получить все узлы, соответствующие option [data-cost_level] , и если атрибут "value" меньше 3, удалите их с помощью $ ('selector'). Remove ()

document.querySelectorAll('option[data-cost_level]').forEach((item)=>{
  if($(item).attr('value')<3){
     $(item).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>

Answer 2

Ваша попытка:

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

близка.

Во-первых, вам нужно .filter option s, а не select, поэтому измените на

$("#some_id > option")

далее, если вы сравните строки, вы не получите сравнение чисел c, поэтому ("21"<"3")===true, поэтому вам нужно преобразовать в int, есть разные способы сделать это, самый простой - использовать .data() вместо .attr(), который в jquery автоматически преобразует в правильный тип данных (затем сравнивает его с int), ie:

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