jQuery在一个动作的三个SELECT下拉列表中选择相同的OPTION

时间:2009-05-29 19:12:54

标签: jquery

我有3个SELECT下拉

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隐藏在后台(这是由于JSP / Struts限制)。

如果用户选择SELECT 1选项选择SELECT 2相应选项然后选择SELECT 3相应选项,我需要的是一种方法。

实施例

用户选择SELECT 1选项 <option value="mercedes">Mercedes</option>

预期成果:

选择2自动选择的选项 <option value="Sport">Mercedes</option>

选择3自动选择的选项 <option value="1000">Sport</option>

2 个答案:

答案 0 :(得分:6)

这就是它。我会举一个例子。

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

修改:示例:http://jsbin.com/ahema

并且TStamper有一个非常好的观点,确保你输入ID,否则它将无效。 (你可以在例子中看到)

<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>

答案 1 :(得分:0)

您可以将一个类添加到“组”相应的选项,然后在选择时使用JQuery选择器选择这些选项。从那里你可以将选择框设置为所需的索引。