Question

我有一个包含各种选项的选择框：

<select id="person">
  <option data-project_ids="11 23 19" value="17">Goodwin, Alisha</option>
  <option data-project_ids="16" value="20">Ratke, Danny</option>
  <option data-project_ids="" value="16">Powlowski, Ron</option>
  <option data-project_ids="19 7" value="20">Ratke, Danny</option>
</select>

如何按data-project_id过滤选项？

现在我有：

var project = 19; // just an example
$('#person').html().filter('[data-project_ids="' + project + '"]');

如果每个选项只有一个 data-project_id，将工作。但是，通常有很多，有时根本没有。

感谢您的帮助。

Answer 1

如果你这样做：

$("#person [data-project_ids*=19]")

它甚至会选择data-project_ids=192，但您可以这样做：

$("#person [data-project_ids~=19]")

~=是jQuery的attribute-contains-word selector：

选择具有指定属性的元素，其值包含由空格分隔的给定单词。

Answer 2

我建议将空格分隔的字符串值重新格式化为数组语法。 jQuery.data将自动读作数组

使用contains选择器的一大优势是精度。只有在值相同时才会返回，contains选择器也将返回部分匹配。

<option data-project_ids="[11,23,19]" value="17">Goodwin, Alisha</option>

然后过滤器就像：

var project = 19
$('#person option').filter(function(){
   return $.inArray(project, $(this).data('project_ids')) > -1
});

使用传统的阵列方法（推，拼接等）很容易添加或删除ID

的 DEMO

Answer 3

$("#person [data-project_ids*=19]")应该有用。

如何使用jQuery按data-attribute过滤选项？

3 个答案: