Get attributes values from select2 selected option

I'm using the Select2 plugin from 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>

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


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

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


This was answered in another SO question

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


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


We can use a combination of select2 data and jQuery :


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>

$('.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

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 ='value'),
     dataname ='name');

     //do what you want with the data?

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

$("$id").select2("val", option);

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").change(function () {

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



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


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

el = document.getElementsByName("invoice_line[0][vat]")

The 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) {

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_name option').each(function (index) {

set an id for your select element and this would work


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

    var selected_value= $('.hakemler').val();
    var wanted= $('.select_class').find('option[value="'+selected_value+'"]').attr('data-foo');
    alert(selected_value+" "+wanted);
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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.