根据不同的选择选项更改选择框中的选项

时间:2010-06-08 16:14:31

标签: jquery html select options

我有2个选择选项。我想根据我在第一个选择选项中选择的内容更改第二个选择选项中的下拉选项。我如何在jquery中做到这一点?

<select id="Manage">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
<select>

如果从第一个选择选项

中选择了A,则选择第二个选项
<select id='selectA'>
   <option value="1">1</option>
   <option value="2">2</option>
</select>

现在,如果从第一个选择选项中选择了B

<select id='selectA'>
   <option value="3">3</option>
   <option value="4">4</option> 
</select>

2 个答案:

答案 0 :(得分:9)

类似的东西:

$('#Manage').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option><option value="2">2</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="3">3</option><option value="4">4</option>';
    }

    $('#selectA').html(options);
});

当然,您可以选择例如:存储在一个数组中,并将它们组合在飞行中或其他任何东西上,这取决于你。

参考:.change().val()

答案 1 :(得分:3)

你可以使用3种不同的技术:

  1. 第一次选择后,您可以使用AJAX加载第二个选择的选项
  2. 您在JSON对象中保存第二个选择的所有选项,然后在选择第一个选项后包含它
  3. 您预定义所有选择并显示/隐藏和禁用/启用其他选择
  4. 第一个可能是最好的,因为您可以根据用户的fisrt选择从数据库中获取值,并且您可以构建孔选择服务器端。