<select id="dropdown">
    <option value="200" selected>AMD Athlon 7x</option>
    <option value="300">Core i7</option>
    <option value="400">Core i5</option>
</select>
<select id="dropdown">
    <option value="250" selected>GTX 560 ti</option>
    <option value="350">GRX 680</option>
    <option value="40">ATI 6870</option>
</select>

Im calculating price of final product base on selected value.

$('select').change(function() {
});

I need this function to remove selected attribute and assign it to selected option but i dont know how to target newly selected option.

<select id="dropdown">
    <option value="200" selected>AMD Athlon 7x</option>
    <option value="300">Core i7</option>
    <option value="400">Core i5</option>
</select>
<select id="dropdown">
    <option value="250" selected>GTX 560 ti</option>
    <option value="350">GRX 680</option>
    <option value="40">ATI 6870</option>
</select>

Im calculating price of final product base on selected value.

$('select').change(function() {
});

I need this function to remove selected attribute and assign it to selected option but i dont know how to target newly selected option.

• javascript
• jquery

• Isn't that how dropdowns work by default? – Explosion Pills Commented Mar 14, 2013 at 14:55

4 Answers 4

$('select').change(function() {
     $(this).children(':selected').attr('selected', true);
});

But i don't understand why you need this :)

Like this:

$('select :selected').change(function(){
  //more code
});

To grab the selected option, your drop down lists should first have unique IDs

<select id="dropdown1">
    <option value="200" selected>AMD Athlon 7x</option>
    <option value="300">Core i7</option>
    <option value="400">Core i5</option>
</select>
<select id="dropdown2">
    <option value="250" selected>GTX 560 ti</option>
    <option value="350">GRX 680</option>
    <option value="40">ATI 6870</option>
</select>

$("#dropdown1 option:selected");

Now, that said, your drop down menu will change the first drop down selected option for you automatically.

In addition, if you want to grab the value of the selected option when it is selected, use .val()

$('select :selected').change(function(){
    $("#dropdown1 option:selected").val();
});

The above examples have a syntax error. The following is incorrect (I tried it, it doesn't work):

$('select :selected').change(function(){

Below is from the jQuery site example code (I tried it too, and it does work):

<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
/* ... */
<script>
$( "select" ).change(function() {   // <<<<< this is the correct syntax
  var str = "";
  $( "select option:selected" ).each(function() {
    str += $( this ).text() + " ";
  });
})
</script>