select value of dropdownlist item jquery

Question

HTML

<select id="selectDepartment">
  <option value="1">120</option>
  <option value="2">20</option>
  <option value="3">140</option>
  <option value="4">4120</option>
  <option value="5">560</option>
  <option value="6">451</option>
  <option value="7">310</option>
  <option value="8">656</option>
  <option value="9">444</option>
  <option value="10">555</option>
  <option value="11">2560</option>
  <option value="12">450</option>
</select>

jQuery

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

alert($("select option:selected").val()); 

});

the above function always shows value 1 on alert, when I select any one of the options

Try changing $("select option:selected") to $("option:selected", this). $("select option:selected") will grab the 1st select on the page, which may not be the one you want. — gen_Eric
– gen_Eric, Commented Apr 17, 2012 at 18:33
@BradChristie ... Dosen't change that his posted code works. Obviously he needs something different if he got more selectboxes, like the answer you posted. But his code is still "working" considering his HTML. — Marco Johannesen
– Marco Johannesen, Commented Apr 17, 2012 at 18:59
@MarcoJohannesen: "Working" is a relative term as are the metrics which are used to measure. I could say my car with no tires or engine is "working" because it rolls down the road, however other drivers may be inclined to disagree. — Brad Christie
– Brad Christie, Commented Apr 17, 2012 at 19:14

Brad Christie · Accepted Answer · 2012-04-17 18:34:31Z

5

Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.

Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.

Try to keep the scope to within the current <Select> using this:

$('#selectDepartment').change(function(){
  var selopt = $('option:selected',this);
});

Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:

var selopt = $(this).val();

Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.

answered Apr 17, 2012 at 18:34

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

1 Comment

Robin Maben Over a year ago

Just to add, .text() will give you the text of the selected option.

Starx · Accepted Answer · 2012-04-17 18:38:33Z

0

You can do something like this:

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

     var selected = $(this).find(":selected");

});

answered Apr 17, 2012 at 18:38

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

select value of dropdownlist item jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related