tags:

views:

332

answers:

2

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>

+6  A: 

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>
altCognito
@Phil- just to note: that you need to make your select tag the id name posed by your jquery code
TStamper
hmm for some reason I can't get it to work. I do have the Id's set for the SELECT but nothing happens
Phill Pafford
Did you take a look at the example?
altCognito
Yeah I looked at the example and it's the same code that you posted, don't know whats wrong :( I will work on getting it working or posting the problem, thanks
Phill Pafford
Should this be inside document.ready() or outside?
Phill Pafford
You should set it up within document.read() or $(function() {...})
altCognito
A: 

You could add a class to 'Group' the corresponding options and then upon selection select those options with a JQuery selector. From there you could set the select boxes to the desired index.

Tom Hubbard