jquery - change selects value onchange of another select

Question

i start learning jquery few days ago, and i like it very much. but now i have a problem, that can't solve alone.

i have two selects

<select id="select1">
  <option value="1">1day</option>
  <option value="2">2day</option>
  <option value="3">3day</option>
</select>

<select id="select2">
  <option value="1">1day</option>
  <option value="2">2day</option>
  <option value="3">3day</option>
</select>

i need to set #select2 the same value with #select1, when #select1 changes

i've red some questions about select tag here, but i need to set "selected" attribute to that option, which have the same value. how can i do it?

Thanks

Answer 1

To set the value use .val() like this:

$(function() { //run on document.ready
  $("#select1").change(function() { //this occurs when select 1 changes
    $("#select2").val($(this).val());
  });
});

You can see a working demo here

This would set <select id="select2"> to the same value as the other one has. .val(vale) selects the <option> that has the corresponding value in the <select>, also de-selecting the previous selection. You use .val() without parameters to get the currently selected <option>'s value.