如何通過jQuery的數據屬性過濾選項？

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選擇器 ：

選擇具有指定屬性的元素，該元素的值包含以空格分隔的給定單詞。

Answer 2

我建議將以空格分隔的字符串值重新格式化為數組語法。 jQuery.data將自動讀取為數組

與使用contains選擇器相比，此方法的一大優勢是精度。 僅當值相同時，您將獲得return， 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。

演示

Answer 3

$("#person [data-project_ids*=19]")應該可以正常工作。