Hello all i am trying to change one dropdowns selected index once another is changed, and i want to use jquery to select the dropdowns. Here is some of my code:

<div id = "monthlist">
<select name = "months">
   <option value = 1 > January </option>
   <option value = 2 > Febuary </option>
   <option value = 3 > March </option>
   <option value = 4 > April </option>
   <option value = 5 > May </option>
   <option value = 6 > June </option>
   <option value = 7 > July </option>
   <option value = 8 > August </option>
   <option value = 9 > September </option>
   <option value = 10 > October</option>
   <option value = 11 > November </option>
   <option value = 12 > December </option>
   </select>
   </div>

   <div id = "yearlist">
   <select name = "years">
   <option value = 1993 > 1993 </option>
   <option value = 1994 > 1994 </option>
   <option value = 1995 > 1995 </option>
   <option value = 1996 > 1996 </option>
   <option value = 1997 > 1997 </option>
   <option value = 1998 > 1998 </option>
   <option value = 1999 > 1999 </option>
   <option value = 2000 > 2000 </option>
   <option value = 2001 > 2001 </option>
   </select>
   </div>

The JQuery code is here:

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

        $("select#yearlist").prop('selectedIndex', 2);
    });

I want to set the selected index of "yearlist" to a specific index once the monthlist dropdown is changed. But my selector or my code is incorrect, any suggestion or tips will be greatly appreciated.

Hello all i am trying to change one dropdowns selected index once another is changed, and i want to use jquery to select the dropdowns. Here is some of my code:

<div id = "monthlist">
<select name = "months">
   <option value = 1 > January </option>
   <option value = 2 > Febuary </option>
   <option value = 3 > March </option>
   <option value = 4 > April </option>
   <option value = 5 > May </option>
   <option value = 6 > June </option>
   <option value = 7 > July </option>
   <option value = 8 > August </option>
   <option value = 9 > September </option>
   <option value = 10 > October</option>
   <option value = 11 > November </option>
   <option value = 12 > December </option>
   </select>
   </div>

   <div id = "yearlist">
   <select name = "years">
   <option value = 1993 > 1993 </option>
   <option value = 1994 > 1994 </option>
   <option value = 1995 > 1995 </option>
   <option value = 1996 > 1996 </option>
   <option value = 1997 > 1997 </option>
   <option value = 1998 > 1998 </option>
   <option value = 1999 > 1999 </option>
   <option value = 2000 > 2000 </option>
   <option value = 2001 > 2001 </option>
   </select>
   </div>

The JQuery code is here:

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

        $("select#yearlist").prop('selectedIndex', 2);
    });

I want to set the selected index of "yearlist" to a specific index once the monthlist dropdown is changed. But my selector or my code is incorrect, any suggestion or tips will be greatly appreciated.

• javascript
• jquery
• html-select

• take a look to this link. it worked out great for me – BrOSs Commented Feb 5, 2013 at 15:53

2 Answers 2

You're trying to select the month and year lists by their names. Use the ID of the outer divs instead...

$("div#monthlist select").change(function(){
    $("div#yearlist select")[0].selectedIndex = 2;
});

is it you are looking for ??

$("#monthlist").change(function(){
    $("#yearlist").get(0).selectedIndex = 2; 
}

And correction to your case :

$("#monthlist").change(function(){
    $("select#yearlist").attr('selectedIndex', 2);
}

And one more choice for index

$("#monthlist").change(function(){
    $('#yearlist option').eq(2).attr('selected', 'selected');
}