Question

I have 3 SELECT drop down

SELECT 1

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

SELECT 2

<select type="hidden">
  <option value="Sadan">Volvo</option>
  <option value="Sadan">Saab</option>
  <option value="Sport">Mercedes</option>
  <option value="Sport">Audi</option>
</select>

SELECT 3

<select>
  <option value="1000">Sport</option>
  <option value="2000">Sadan</option>
</select>

SELECT 2 is hidden in the background (This is due to the JSP/Struts limitation).

What I need is a way if the user selects SELECT 1 option that SELECT 2 corresponding option would be selected and then SELECT 3 corresponding option would be selected.

EXAMPLE:

User selects SELECT 1 option <option value="mercedes">Mercedes</option>

EXPECTED RESULTS:

SELECT 2 auto selected option <option value="Sport">Mercedes</option>

AND

SELECT 3 auto selected option <option value="1000">Sport</option>

Answer 1

This is pretty much it. I’ll work up an example.

$('#select1').change(function() {
   $('#select2').val($('#select1').val());
   $('#select3').val($('#select2').val());
});

Edit: The example: http://jsbin.com/ahema

And TStamper has a very good point, make sure you put in the ID, or it won’t work. (you can see that in the example)

<select --> id="select2" <-- type="hidden">
  <option value="Sadan">Volvo</option>
  <option value="Sadan">Saab</option>
  <option value="Sport">Mercedes</option>
  <option value="Sport">Audi</option>
</select>