Get attributes values from select2 selected option

Question

I'm using the Select2 plugin from http://ivaynberg.github.io/select2/select2-latest.html what works fine but i'm having a problem to get the values from the options attributes.

I've got a select menu like this:

<select name="invoice_line[0][vat]" class="vat">
    <option value="20440" data-value="21.00" data-name="20440" selected="selected">21%</option>
    <option value="20441" data-value="6.00" data-name="20441">6%</option>
    <option value="20442" data-value="0.00" data-name="20442">0%</option>
</select>

How can I get the values of the attributes 'data-value', 'data-name' and 'value' of the selected option?

Answer 1

obj = $("#dropdown").select2("data")

in obj variable i will get all the data of the selected node.

Answer 2

This was answered in another SO question

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.

Answer 3

We can use a combination of select2 data and jQuery :

$("#example").select2('data').element[0].attributes['data-name'].value

Answer 4

Following worked for me. Idea is to use "change" function as follows

<select class="drop-down">
     <option value="0">A</option>
     <option value="1">B</option>
</select>

$('.drop-down').select2().on("change", function(e) {
    var obj = $(".drop-down").select2("data");
    console.log("change val=" + obj[0].id);  // 0 or 1 on change
});

Answer 5

var return_option = $("#your-select-input-id").select2().find(":selected")[0];    

above given statement will return select option and then put that return result as given below:

var name_of_attribute = $( return_option ).attr('name-of-attribute');

This will return the attribute value.

Answer 6

No idea about the pluggin, and without checking if the code works i imagine it would be something like this:

$('.vat li').each(function(){
     var me = $(this),
     mevalue = me.attr('value'),
     datavalue = me.data('value'),
     dataname = me.data('name');

     //do what you want with the data?
});

Answer 7

Put select2 into tagging mode , it will help you. Or Try below similar code, it may work for you ...

$("$id").select2("val", option);
$("$id").attr("data-name");

Answer 8

I know that this is an old post, but I was struggling with this same problem. This is the solution that me and my good friend Thys finally got to work:

<script type="text/javascript">

$(document).ready(function ()
{
    $("#e1").select2();

    $("#e1").change(function () {

        var theID = $("#e1").val();
        $('#staffNr').val(theID);
        $('#staffNr').val();
            //var theID = $(test).select2('data').id;
            var theSelection = $(test).select2('data').text;
            $('#selectedID').text(theID);
            $('#selectedText').text(theSelection);
    });

});

@Html.Hidden("fieldName","staffNr");

This worked in my MVC 4 view with the last line in my html form where it is correctly added to the model. Don't forget to up-vote if you use my answer please :) I haven't got much of a reputation...

Answer 9

I hope you solved the issue. Here we dont use select2(), if we use select2() it will not work all other functions like formatNoMatches, on-change....

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

Answer 10

el = document.getElementsByName("invoice_line[0][vat]")
el.options[[el.selectedIndex]].attributes["data-id"].value

Answer 11

The params.data.element object of the selected item holds the data you're looking for.

Where .foo is the select element I'm calling, and the data attribute within the options I want to access is data-bar="some value" The following works for me:

var $fooSelect = $('.foo');
$fooSelect.on(function (e) {
  console.log($(e.params.data.element).data('bar'));
});

Answer 12

You can access to attributes looking in DOM structure:

<select id="select_name">
   <option value="20440" data-value="21.00">21%</option>
   <option value="20441" data-value="6.00">6%</option>
   <option value="20442" data-value="0.00">0%</option>
</select>

    $('#select_name option').each(function (index) {
        console.log($(this).attr("data-value"));
    });

Answer 13

set an id for your select element and this would work

$('select#your-id').find('option[value="'+$('#your-id').val()+'"]').attr('data-attribute');

Answer 14

You haveto do it with on("change"... because of this is a dynamicly generated option list.

$('.select_class').on("change",function(){
    var selected_value= $('.hakemler').val();
    var wanted= $('.select_class').find('option[value="'+selected_value+'"]').attr('data-foo');
    alert(selected_value+" "+wanted);
});