Get custom data-attribute in select2 with <select>

html jquery-select2 custom-data-attribute
Kalzem picture Kalzem · Mar 7, 2014 · Viewed 52.8k times · Source

Let's assume you have the following HTML5

<select id="example">
    <option value="AA" data-id="143">AA</option>
    <option value="BB" data-id="344">BB</option>
</select>

$("#example").select2();

How do I get the data-id from the selected option ?

Answer

Kalzem picture Kalzem · Mar 7, 2014

There is no direct method with select2, you can use a combinaison of select2 data and jQuery :

$("#example").select2().find(":selected").data("id");

First you get the select2 data then you find your selected option with jQuery and finally the data-attribute.

Related questions

Resetting Select2 value in dropdown with reset button

What would be the best way to reset the selected item to default? I'm using Select2 library and when using a normal button type="reset", the value in the dropdown doesn't reset. So when I press my button I want "…

Read More
How to Use select2.js

I want to add a form field which can auto fill text & can take multiple tabs(similar to fb). I found select2.js helps me do it, But i am having problems in using it when i set multiple …

Read More
How to render html in select2 options

In this example of data loaded from a remote source I can see images and other html elements rendered as options. I'd like to accomplish the same thing using data in a local array. I've tried building an array as …

Read More