javascript - How to filter options by data-attribute with jQuery? - Stack Overflow

admin管理员组

文章数量:1319006

I have a select box with various options:

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

How can I filter the options by a data-project_id?

Right now I have:

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

This would work if every option had only one data-project_id. However, there are often many, sometimes none at all.

Thanks for any help.

I have a select box with various options:

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

How can I filter the options by a data-project_id?

Right now I have:

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

This would work if every option had only one data-project_id. However, there are often many, sometimes none at all.

Thanks for any help.

• javascript
• jquery
• filtering

Share Improve this question Follow asked Dec 27, 2013 at 19:41 Tintin81Tintin81 10.2k2020 gold badges9393 silver badges183183 bronze badges 2

• check my answer out, it is the exact thing you need. – Mehran Hatami Commented Dec 27, 2013 at 19:49
• 1 As a sidenote, data attributes do in fact support strings that looks like arrays, and they will be parsed as such by jQuery, which would it so much easier to just use $.inArray on the data attribute in a filter. – adeneo Commented Dec 27, 2013 at 20:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I would suggest reformatting your space separated string values to array syntax. jQuery.data will automatically read as array

A big advantage to this over the using contains selectors is precision. You will only get return when values are identical, contains selectors will return partial matches also.

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

Then filter can be like:

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

Will be easy to add or remove ID's using conventional array methods (push, splice etc)

DEMO

if you do:

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

it would even select data-project_ids=192, but you can do this instead:

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

~= is jQuery's attribute-contains-word selector:

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

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

本文标签： javascriptHow to filter options by dataattribute with jQueryStack Overflow