CODEWITHSUNDEEP
htmljquery-select2custom-data-attribute
Kalzem
Kalzem

Reputation: 7501

Get custom data-attribute in select2 with <select>

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 ?

Upvotes: 36

Views: 90681

Answers (10)

Abhinav bhardwaj
Abhinav bhardwaj

Reputation: 2737

We can simply do this, like:

$(this).find(":selected").data("id")

Upvotes: 4

Wagner Langer
Wagner Langer

Reputation: 191

$(document).ready(function() {
    $('select#myselect').select2({
        templateResult: formatOutput
    });

});
function formatOutput (item) {
    var $state = $(item.element).data('id') + ' ' + item.text;
    return $state;
};

Upvotes: 18

user2032807
user2032807

Reputation: 59

Here is how I handle it. Not sure about opt-groups.

HTML

<select id="myselect" name="myselect">
  <option value=""  data-url=""></option>   
    <option value="City 1" data-url="/alabama/city-1">City 1</option>  
    <option value="City 2" data-url="/alabama/city-2">City 2</option>   
</select>

JAVASCRIPT

$("#myselect").select2({
    width: '100%',
    templateSelection: function (data, container) {
        // Add custom attributes to the <option> tag for the selected option
        $(data.element).attr('data-url', data.dataset.url);
        return data.text;
    }
});

var url = $("#myselect").find(':selected').data('url');

Upvotes: 1

Kalzem
Kalzem

Reputation: 7501

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

$("#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.

Upvotes: 48

MD. Jubair Mizan
MD. Jubair Mizan

Reputation: 1570

Ad Per @Kalzem Example that works perfectly fine But you have to mention your attribute like this data-attributeName . You must mention data at first then mention your attributes name . Example : <option value="AA" data-attributeName="143">AA</option> and you will get the data with $("#example").select2().find(":selected").data("attributeName");

Upvotes: 0

Brian Duncan
Brian Duncan

Reputation: 79

I use select2 to load all of my options dynamically (from an array), and this is what I have been able to use successfully:

$('#element').select2('data')[0].dataAttribute;

where the id of the select is 'element', and dataAttribute is the custom attribute for the option i'm trying to retrieve.

Upvotes: 0

hassan
hassan

Reputation: 8308

so simple, using jquery api [tested against select2 4.x version]

$('#select').on('select2:select', function (e) {
    let id = $(e.params.data.element).data('id');
});

Upvotes: 9

Paul
Paul

Reputation: 20091

Select2 v4 relies on <select> tags instead of hidden <input> tags so it's now easier to get the selected option or options: you just refer to the original <select>. This may have also been the case with Select2 v3 but I've only used Select2 v4.

$('#example option:selected').attr('data-id')

jsfiddle demonstration

See also Get selected value in dropdown list using JavaScript?

Edit: I like this answer for general purpose data object access:

var d = $("#dropdown").select2("data");

d will be an array containing the selected item(s) as objects, so to access the id property of the first item:

var id = d[0].id;

Upvotes: 27

MrSo
MrSo

Reputation: 640

My contribution on how to get value of data-attibute of selected option using Select2 event (3.5) (thx to @loreto g's answer):

<select id="myselect">
    <option value="foo" data-type="bar" data-options='baz'></option>
</select>

<script>
var myselect = $('#myselect').select2();

myselect.on('select2-selecting', function(sel){

    var seltype = sel.choice.element[0].attributes['data-type'].value,
        seloptions = sel.choice.element[0].attributes['data-options'].value;

});
</script>

Hope this helps

Upvotes: 2

Loreto Gabawa Jr.
Loreto Gabawa Jr.

Reputation: 2056

After hours of trying to solve this, I have manage to pull out the attribute. I am using 3.5.4

$("#select2").select2('data').element[0].attributes[1].nodeValue

HTML

<select id="select2" name="course" class="form-control">
  <option></option>  
  <optgroup label="Alabama">  
    <option value="City 1" data-url="/alabama/city-1">City 1</option>  
    <option value="City 2" data-url="/alabama/city-2">City 2</option>  
  </optgroup>  
</select>

$("#select2").select2('data').element[0].attributes[0].nodeValue --> Value Attribute
$("#select2").select2('data').element[0].attributes[1].nodeValue --> Data-URl Attribute

Upvotes: 7

Related Questions