Question

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

<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可用？有人告诉我，我需要存储这些值，但这有点丢失了吗？

感谢您的帮助。

约翰

Answer 1

证明：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');

});

Answer 2

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

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

DEMO

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

Answer 3

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>

<强> Live Proof

Answer 4

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

jQuery两个下拉菜单？（动态地）

4 个答案:

jQuery两个下拉菜单？ （动态地）

4 个答案:

jQuery两个下拉菜单？（动态地）