Get attributes values from select2 selected option

问题

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?

回答1:

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

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

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

回答3:

We can use a combination of select2 data and jQuery :

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

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

回答5:

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

回答6:

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

回答7:

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

回答8:

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

回答9:

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

回答10:

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

回答11:

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

回答12:

set an id for your select element and this would work

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

来源：https://stackoverflow.com/questions/19155264/get-attributes-values-from-select2-selected-option