jQuery: Change selection of 2nd dropdown based on selection of 1st

Question

I have two drop down lists and I would like to make it when someone selects value 2 from dropdown1, dropdown2 is automatically changed to value 4.

<select id="dropdwon1">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
</select>

<select id="dropdwon2">
<option value="3">Item1</option>
<option value="4">Item2</option>
<option value="5">Item3</option>
</select>

I have seen how this can be done when the values are the same but not when they are different. Looking for a simple solution like this below.

$("#dropdwon1").change(function(){
$("#dropdwon2").val($(this).val());
});

Answer 1

From what you're describing it seems like you want to have the selectedIndex in sync.

Here's how:

jsFiddle Example

$(function() {
    $("#dropdwon1").change(function() {
        $("#dropdwon2")[0].selectedIndex = $(this)[0].selectedIndex;
    });
});​

Answer 2

$("#dropdwon1").change(function(){
   $("#dropdwon2").val( +this.value + 2 );
});

DEMO

+this.value will converted into number so you can add 2.

OR

$("#dropdwon1").change(function(){
   $("#dropdwon2").prop('selectedIndex', this.selectedIndex );
});

DEMO

Answer 3

This works:

$('#dropdown1').change(function(){
   var ind = $(this).find('option:selected').index();
   $('#dropdown2 option').eq(ind).prop('selected', true);
});

Answer 4

var ac1=$("#dd1").val();
$("#dd2").val(ac1);