Get current selected option

Question

<select id="sel"> <option id="1">aa</option> <option id="2">bb</option> <option id="3">cc</option> </select> $("#sel").change(function(){ alert($(this).children().attr('id')) })

LIVE: http://jsfiddle.net/cxWVP/

How can i get current selected option ID? Now always show me id="1".

Is there some reason you have ID attributes instead of value attributes on your options? — user1106925
– user1106925, Commented Jan 10, 2012 at 19:36
@MarkFondy: You should have added that to the question. It would have saved an argument in the comments here. — gen_Eric
– gen_Eric, Commented Jan 10, 2012 at 19:56

Jakub · Accepted Answer · 2012-01-10 19:27:57Z

21

$('#sel').change(function(){ alert($(this).find('option:selected').attr('id')); });

should work.

answered Jan 10, 2012 at 19:27

Jakub

20.5k8 gold badges67 silver badges93 bronze badges

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

6 Comments

Andy E Over a year ago

No self-respecting developer should ever choose this method over Esailia's answer. This is kind of like the scenic route, except it doesn't look pretty.

Ruan Mendes Over a year ago

@Jakub: That's kind of harsh, I prefer Esailia's answer too (since it's the same as mine) but this could be considered easier to understand if you're a jQuery minded developer and the question does mention jQuery. I am not a jQuery developer, I don't like procedural jQuery code so I wouldn't use it because it has an unneeded level of abstraction since straight JS code is even clearer.

Jakub Over a year ago

JuanMendes & AndyE, well that's why if you guys don't like my answer you have to right to downvote. Don't need to be overly critical.

TheLQ Over a year ago

@AndeE And do you have any non-trolling reasons why this is worse than Esailija's answer? This makes sense, and explains things in an easy, self-documenting, step-by-step way vs Esailija's answer which is not obvious and would require a long comment explaining exactly what it does

eagleal Over a year ago

To clarify why Esailija's one performs better: this.onchange already updates this.selectedIndex. By using find, you're doing a query against albeit a small portion of the tree (it of course depends on jQuery internals).

|

Esailija · Accepted Answer · 2012-01-10 19:28:08Z

http://jsfiddle.net/cxWVP/1/

$("#sel").change(function(){ alert( this.options[this.selectedIndex].id ); })

gen_Eric · Accepted Answer · 2012-01-10 19:27:45Z

12

<option> tags should have a value attribute. When one is selected, you get it's value using $("#sel").val().

<select id="sel"> <option value="1">aa</option> <option value="2">bb</option> <option value="3">cc</option> </select> $("#sel").change(function(){ alert($(this).val()) });

DEMO: http://jsfiddle.net/yPYL5/

answered Jan 10, 2012 at 19:27

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

6 Comments

Ruan Mendes Over a year ago

OP is not asking for the value of the selected object. Looks like what OP really wants is the option object (its id attribute)

gen_Eric Over a year ago

@JuanMendes: Huh? The OP want's either 1, 2 or 3 depending on which option is selected. That's what this code does. <option> tags are supposed to have a value for this purpose. The HTML was incorrect as well as the JavaScript.

Ruan Mendes Over a year ago

Sorry, I didn't notice that you swapped id with value... Suggesting that they change the HTML doesn't teach the OP what the question was really asking... though it may be the best solution.

gen_Eric Over a year ago

@JuanMendes: I'm teaching them the correct solution. I don't want to show the OP the wrong way to do this. Better to do it the right way, then to try to make workarounds to solve problems created by doing things the wrong way.

Ruan Mendes Over a year ago

Your solution assumes that what they want is the value property of the option. People usually simplify the problem to make it easier to answer. However, the OP also mentioned that he already uses value for something else, so this is not a good solution for what's he's doing. That's why I usually prefer to answer the question than to imply that the OP doesn't know what they're doing.

|

Ruan Mendes · Accepted Answer · 2012-01-10 19:29:20Z

http://jsfiddle.net/ugUYA/

To get the selected option inside a select element, you can use selectedIndex, then you can use the options array to get to the selected option object

$("#sel").change(function(){ alert( this.options[this.selectedIndex].id ) })

ShankarSangoli · Accepted Answer · 2012-01-10 19:31:51Z

Try this

$("#sel").find('option:selected').attr('id');

Ideally you should use value attribute for option tags and just use val method to get the selected value from the dropdown element. $("#sel").val();

Great answer: Answers the question, but explains a better way to do it.

simshaun · Accepted Answer · 2012-01-10 19:27:49Z

1

$(this).find('option:selected').attr('id')

answered Jan 10, 2012 at 19:27

simshaun

21.5k1 gold badge60 silver badges73 bronze badges

Comments

Houcine · Accepted Answer · 2013-10-30 10:57:42Z

1

Try this :

$('select:#idSelect').val()

edited Oct 30, 2013 at 10:57

Houcine

24.2k13 gold badges59 silver badges84 bronze badges

answered Jul 16, 2013 at 10:43

Badre

7479 silver badges18 bronze badges

Comments

jrummell · Accepted Answer · 2012-01-10 19:26:50Z

0

Change the id attribute to value and then use .val().

<select id="sel"> <option value ="1">aa</option> <option value ="2">bb</option> <option value ="3">cc</option> </select> var selectedValue = $("#sel").val();

answered Jan 10, 2012 at 19:26

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

10 Comments

Ruan Mendes Over a year ago

That won't give you the id, it will give you: aa, bb or cc

jrummell Over a year ago

Thanks for pointing out the obvious (id vs value). I updated my answer.

Ruan Mendes Over a year ago

That's still not what was requested, you can't change the HTML. OP really needs to access the option object inside the select

Ruan Mendes Over a year ago

@Rocket: because you are getting around the problem that the OP wants to solve. You don't know that the HTML can be changed

Ruan Mendes Over a year ago

@Rocket: After reviewing both your answers (jrummel), I agree that this HTML is what the OP should be using. It's a blurry line whether to answer the literal question, or to suggest a better approach...

|

Yogurt The Wise · Accepted Answer · 2012-01-10 19:30:25Z

0

Will the jquery :selected filter work. Something like this...

$("#sel:selected").each(function(){ alert($(this).attr('id')) })

answered Jan 10, 2012 at 19:30

Yogurt The Wise

4,4995 gold badges36 silver badges43 bronze badges

1 Comment

Ruan Mendes Over a year ago

Should be $("#sel option:selected") but it's wasteful since you already have a reference to the select element as this in the handler

Collectives™ on Stack Overflow

Get current selected option

9 Answers 9

6 Comments

Comments

6 Comments

Comments

1 Comment

Comments

Comments

10 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

Comments

6 Comments

Comments

1 Comment

Comments

Comments

10 Comments

1 Comment

Linked

Related