1

如果我有两个下拉菜单，例如：

<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>

其次是：

<select>
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>

我怎样才能做到这一点，如果有人从第一个下拉列表中选择选项 2，那么第二个下拉列表中只有选项 9 可用？有人告诉我我需要存储这些值，但对这一切有点迷茫？

谢谢你的帮助。

约翰

4

4 回答 4

2

证明：http: //jsfiddle.net/iambriansreed/VLvYA/

根据要求禁用，也自动选择选项。

$('#first-select').change(function(){
    $('#second-select option').prop('disabled',false);
    if(this.value == 'option2')
        $('#second-select option:not([value="option9"])')
            .prop('disabled',true).parent().val('option9');

});​
于 2012-05-04T15:13:16.663 回答
0

我假设您要根据从下拉列表 1 中选择的选项索引删除第二个下拉选项。

编辑：删除了不需要的额外克隆。

演示

$(function () {
    var $dd2Opt = $('#dd2 option').clone();
    var $dd2 = $('#dd2');
    $('#dd1').change(function () {
        $dd2.empty().append($dd2Opt.slice(this.selectedIndex + 1));
    });
});

HTML

<select id="dd1">
  <option value="option1">option 1</option>
  <option value="option2">option 2</option>
  <option value="option3">option 3</option>
</select>

<select id="dd2">
  <option value="option5">option 5</option>
  <option value="option8">option 8</option>
  <option value="option9">option 9</option>
</select>
于 2012-05-04T15:14:37.417 回答
-1 
var opts = $('select.second option');
$('select:first').on('change',function() {
  if(this.value == 'option2') {
     $(this).next('select.second').empty().append(opts[this.selectedIndex + 1]).change();
  } else {
    $(this).next('select.second').empty().append(opts).change();
  }
})

HTML

<select>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
</select>
<select class="second">
<option value="option5">option 5</option>
<option value="option8">option 8</option>
<option value="option9">option 9</option>
</select>

现场证明

于 2012-05-04T15:19:30.753 回答
-2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSelect').live('change', function () {
                $('#subSelect option').hide();
                $('#subSelect option[data-option="' + $(this).val() + '"]').show();
                $('#subSelect option:visible:first').attr('selected', true);
            });

            $('#mainSelect').trigger('change');
        });
    </script>
</head>
<body>
    <select id="mainSelect">
        <option value="option1">option 1</option>
        <option value="option2">option 2</option>
        <option value="option3">option 3</option>
    </select>
    <select id="subSelect">
        <option value="option5" data-option="option1">option 5</option>
        <option value="option8" data-option="option3">option 8</option>
        <option value="option9" data-option="option2">option 9</option>
    </select>
</body>
</html>
于 2012-05-04T15:18:20.500 回答