jQuery - getting custom attribute from selected option

Question

Given the following:

<select id="location">
    <option value="a" myTag="123">My option</option>
    <option value="b" myTag="456">My other option</option>
</select>

<input type="hidden" id="setMyTag" />

<script>
    $(function() {
        $("#location").change(function(){
            var element = $(this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });
    });
</script>

That does not work...
What do I need to do to get the value of the hidden field updated to the value of myTag when the select is changed. I'm assuming I need to do something about getting the currently selected value...?

SLaks · Accepted Answer · 2010-02-09 16:37:36Z

605

You're adding the event handler to the <select> element.
Therefore, $(this) will be the dropdown itself, not the selected <option>.

You need to find the selected <option>, like this:

var option = $('option:selected', this).attr('mytag');

answered Feb 9, 2010 at 16:37

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eduncan911 Over a year ago

Made my all-nighter crunch-time so much easier... +1!

Jon Marnock Over a year ago

Note, if you're looking to retrieve the option that was selected when the page loaded (not the currently selected option) you can use $('option[selected]', this) instead (note: if no option was selected when the page loaded, that will return no matches, so calling attr() on that will result in undefined. easy to test for and deal with of course.)

Brian Davis Over a year ago

For anyone looking for this answer >= 2022, I think the syntax changed at some point. I got it to work with :checked instead of :selected with some help from this answer: stackoverflow.com/a/30104891/4172413

tvanfosson · Accepted Answer · 2010-02-09 16:37:54Z

61

Try this:

$(function() { 
    $("#location").change(function(){ 
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("myTag"); 

        $('#setMyTag').val(myTag); 
    }); 
});

answered Feb 9, 2010 at 16:37

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

NawaMan · Accepted Answer · 2010-02-09 16:38:43Z

35

That because the element is the "Select" and not "Option" in which you have the custom tag.

Try this: $("#location option:selected").attr("myTag").

Hope this helps.

answered Feb 9, 2010 at 16:38

NawaMan

25.8k11 gold badges54 silver badges77 bronze badges

1 Comment

Vicky Thakor Over a year ago

Short and simple answer. :thumbsup:

Chad Levy · Accepted Answer · 2011-11-13 02:19:41Z

12

Suppose you have many selects. This can do it:

$('.selectClass').change(function(){
    var optionSelected = $(this).find('option:selected').attr('optionAtribute');
    alert(optionSelected);//this will show the value of the atribute of that option.
});

edited Nov 13, 2011 at 2:19

Chad Levy

10.1k8 gold badges44 silver badges69 bronze badges

answered Nov 13, 2011 at 1:56

paulo

1211 silver badge2 bronze badges

Comments

Davide Gualano · Accepted Answer · 2010-02-09 16:41:30Z

11

Try this:

$("#location").change(function(){
            var element = $("option:selected", this);
            var myTag = element.attr("myTag");

            $('#setMyTag').val(myTag);
        });

In the callback function for change(), this refers to the select, not to the selected option.

answered Feb 9, 2010 at 16:41

Davide Gualano

13.1k9 gold badges47 silver badges67 bronze badges

Comments

Cerin · Accepted Answer · 2010-02-09 16:42:22Z

7

You're pretty close:

var myTag = $(':selected', element).attr("myTag");

answered Feb 9, 2010 at 16:42

Cerin

65.6k106 gold badges349 silver badges562 bronze badges

Comments

Robin Hossain · Accepted Answer · 2020-05-17 09:41:19Z

6

The easiest one,

$('#location').find('option:selected').attr('myTag');

answered May 17, 2020 at 9:41

Robin Hossain

7359 silver badges12 bronze badges

Comments

openwonk · Accepted Answer · 2016-08-30 16:30:35Z

5

Simpler syntax if one form.

var option = $('option:selected').attr('mytag')

... if more than one form.

var option = $('select#myform option:selected').attr('mytag')

answered Aug 30, 2016 at 16:30

openwonk

15.8k7 gold badges50 silver badges41 bronze badges

Comments

Curtis Fisher · Accepted Answer · 2017-07-27 20:24:38Z

Here is the entire script with an AJAX call to target a single list within a page with multiple lists. None of the other stuff above worked for me until I used the "id" attribute even though my attribute name is "ItemKey". By using the debugger

Chrome Debug

I was able to see that the selected option had attributes: with a map to the JQuery "id" and the value.

<html>
<head>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="List1"></select>
<select id="List2">
<option id="40000">List item #1</option>
<option id="27888">List item #2</option>
</select>

<div></div>
</body>
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#List1');

//request the JSON data and parse into the select element
$.ajax({
url: 'list.json',
dataType:'JSON',
success:function(data){

//clear the current content of the select
$select.html('');

//iterate over the data and append a select option
$.each(data.List, function(key, val){
$select.append('<option id="' + val.ItemKey + '">' + val.ItemText + '</option>');
})
},

error:function(){

//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});

$( "#List1" ).change(function () {
var optionSelected = $('#List1 option:selected').attr('id');
$( "div" ).text( optionSelected );
});
</script>
</html>

Here is the JSON File to create...

{  
"List":[  
{  
"Sort":1,
"parentID":0,
"ItemKey":100,
"ItemText":"ListItem-#1"
},
{  
"Sort":2,
"parentID":0,
"ItemKey":200,
"ItemText":"ListItem-#2"
},
{  
"Sort":3,
"parentID":0,
"ItemKey":300,
"ItemText":"ListItem-#3"
},
{  
"Sort":4,
"parentID":0,
"ItemKey":400,
"ItemText":"ListItem-#4"
}
]
}

Hope this helps, thank you all above for getting me this far.

Amit-Rlogical · Accepted Answer · 2019-07-29 10:56:28Z

1

$("body").on('change', '#location', function(e) {

 var option = $('option:selected', this).attr('myTag');

});

answered Jul 29, 2019 at 10:56

Amit-Rlogical

213 bronze badges

Comments

Mohammad Ali Abdullah · Accepted Answer · 2022-06-01 08:43:08Z

1

var optionAttr1 = $(this).find('option:selected').attr("myTag");
var optionAttr = $('#location option:selected').attr("myTag");

answered Jun 1, 2022 at 8:43

Mohammad Ali Abdullah

3312 silver badges10 bronze badges

1 Comment

raza9798 Over a year ago

$('[name="bulk_vendor_agent[0]"]').find('option:selected').data("name") solved my issue

K M Emon Ahmed · Accepted Answer · 2023-09-17 06:48:42Z

1

In my case the solutions were not working properly, So I have got a solution that worked for me, Putting this if it helps anyone.

var option = $('#location').find(":selected").attr('myTag')

answered Sep 17, 2023 at 6:48

K M Emon Ahmed

1331 silver badge8 bronze badges

Comments

Dharmendra Singh · Accepted Answer · 2017-10-06 05:38:44Z

0

Try This Example:

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

    var tag = $("option[value="+$(this).val()+"]", this).attr('mytag');

    $('#setMyTag').val(tag); 

});

answered Oct 6, 2017 at 5:38

Dharmendra Singh

1,25614 silver badges22 bronze badges

Comments

Akhtar Munir · Accepted Answer · 2020-05-04 12:01:32Z

0

You can also try this one as well with data-myTag

<select id="location">
    <option value="a" data-myTag="123">My option</option>
    <option value="b" data-myTag="456">My other option</option>
</select>

<input type="hidden" id="setMyTag" />

<script>
    $(function() {
        $("#location").change(function(){
           var myTag = $('option:selected', this).data("myTag");

           $('#setMyTag').val(myTag);
        });
    });
</script>

answered May 4, 2020 at 12:01

Akhtar Munir

1,7693 gold badges13 silver badges29 bronze badges

Comments

Md Masud · Accepted Answer · 2022-02-25 12:09:41Z

0

Stright forward way is :

Get selected option attribute value:

var selectedOptionAttributeValue =   $('#location option:selected').attr('myTag');

Get Selected Text:

 var selectedOptionText = $('#location').text();

Get selected value:

var selectedOptionValue = $('#location').val();

answered Feb 25, 2022 at 12:09

Md Masud

2,7511 gold badge24 silver badges16 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-01-13 18:38:22Z

0

If you want to call according to dynamic row ID use:

var data = $(`#var_name_${row_id} option:selected`).attr('value2');

edited Jan 13, 2023 at 18:38

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jan 13, 2023 at 12:36

Akhilesh Kumar

1

Collectives™ on Stack Overflow

jQuery - getting custom attribute from selected option

16 Answers 16

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related