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

Mark Fondy
  • 3,773
  • 8
  • 24
  • 25

9 Answers9

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

should work.

Jakub
  • 20,418
  • 8
  • 65
  • 92
  • 2
    No self-respecting developer should ever choose this method over [Esailia's answer](http://stackoverflow.com/a/8809329). This is kind of like the scenic route, except it doesn't look pretty. – Andy E Jan 11 '12 at 13:24
  • 1
    @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. – Ruan Mendes Jan 11 '12 at 22:12
  • 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. – Jakub Jan 12 '12 at 00:54
  • 2
    @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 – TheLQ Nov 29 '12 at 19:20
  • 1
    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). – eagleal Oct 30 '13 at 11:05
  • Reasons Esailija's is better. 1/ In the absence of a specific JQuery request, a vanilla JS solution should be presented. 2/ In this case, vanilla out performs JQuery. – Adrian Bartholomew Dec 03 '15 at 17:11
20

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

$("#sel").change(function(){
   alert( this.options[this.selectedIndex].id );
})
Esailija
  • 138,174
  • 23
  • 272
  • 326
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/

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
  • 1
    OP is not asking for the value of the selected object. Looks like what OP really wants is the option object (its id attribute) – Ruan Mendes Jan 10 '12 at 19:34
  • @JuanMendes: Huh? The OP want's either 1, 2 or 3 depending on which option is selected. That's what this code does. ` – gen_Eric Jan 10 '12 at 19:34
  • 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. – Ruan Mendes Jan 10 '12 at 19:37
  • 1
    @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. – gen_Eric Jan 10 '12 at 19:40
  • 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 Jan 11 '12 at 22:09
  • @JuanMendes: The OP over-simplified his example, and made in invalid HTML. He also made it seem like he didn't know what he was doing, so I guess I assumed I'd fix his example. It wasn't until later that he said he *did* have value attributes, and he *really* did want the ID. The issue was the question didn't have enough detail. – gen_Eric Jan 11 '12 at 22:12
4

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 )
})
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
3

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

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
1

Try this : 

$('select:#idSelect').val()
Houcine
  • 24,001
  • 13
  • 56
  • 83
Badre
  • 710
  • 9
  • 17
1

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

simshaun
  • 21,263
  • 1
  • 57
  • 73
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();
jrummell
  • 42,637
  • 17
  • 112
  • 171
  • That won't give you the id, it will give you: aa, bb or cc – Ruan Mendes Jan 10 '12 at 19:27
  • Thanks for pointing out the obvious (id vs value). I updated my answer. – jrummell Jan 10 '12 at 19:30
  • 1
    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 Jan 10 '12 at 19:33
  • @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 Jan 10 '12 at 19:35
  • @JuanMendes: I am not getting around the problem, I'm suggesting a better solution. I'm trying to show the OP the correct way to do this, not just how to work around incorrect HTML. – gen_Eric Jan 10 '12 at 19:37
  • 1
    @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... – Ruan Mendes Jan 10 '12 at 19:41
  • @JuanMendes: Just FYI the OP's HTML isn't even valid. You can't have IDs that start with (or are) a number. Also, why are you deciding what the OP means? This is like me asking why I can't hammer a nail with a screwdriver. Would you tell me to hit harder, or use the correct tool? – gen_Eric Jan 10 '12 at 19:44
  • @Rocket: My final comment here. I do not think your suggestion is bad, or that the OP's approach is good. However, if I suggest a change to the approach, I'm going to explain to the OP why I suggested it instead of fixing it without explaining why. If either of your posts had explained what was wrong with the HTML, I think it would be a better answer. To me, the question is still clearly: "How do I access the selected option object?" I understand that the value property of the select element does give you access to the selected option's value and is what you need most of the time. – Ruan Mendes Jan 10 '12 at 19:53
  • @JuanMendes: Sorry for arguing with you, I just hate to show people workarounds, when they should be doing something a certain way. Guess I didn't explain that good enough. Also, it seems the OP has `value` attributes, but didn't show 'em. He said that in a comment. I'm sorry =/ – gen_Eric Jan 10 '12 at 19:55
  • @Rocket: Thanks for a heated but civil discussion – Ruan Mendes Jan 10 '12 at 19:58
0

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

$("#sel:selected").each(function(){
   alert($(this).attr('id'))
})
Yogurt The Wise
  • 4,379
  • 4
  • 34
  • 42
  • Should be `$("#sel option:selected")` but it's wasteful since you already have a reference to the select element as `this` in the handler – Ruan Mendes Jan 10 '12 at 20:08