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?

Jeraldinejeralee

Answer 1

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

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

Himation

Not working, obj = undefined. im using tags btw. – Wellington

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.

Gelya

Answer 3

We can use a combination of select2 data and jQuery :

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

Thorton

$("#example").select2('data')[0].element.attributes['data-name'].value it work for me. – Restricted

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
});

Erikaerikson

Uncaught TypeError: can't access property 0, obj is undefined – Wellington

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.

Qintar

You sir, are my hero! I simplified it a bit by doing var obj = $($("#your-select-input-id").select2().find(":selected")[0]); but either way works 100% :), I hate how they set this up. – Wellington

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?
});

Adamok

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");

Acetyl

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

Zircon

Answer 9

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

Morell

Answer 10

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");

Benthamism

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'));
});

Claribelclarice

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"));
    });

Cottrill

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');

Mauceri

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);
});

Hithermost