Javascript jQuery两个下拉菜单？（动态）_Javascript_Jquery_Menu_Drop Down Menu

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

javascript jquery menu drop-down-menu

Javascript jQuery两个下拉菜单？（动态）,javascript,jquery,menu,drop-down-menu,Javascript,Jquery,Menu,Drop Down Menu,如果我有两个下拉列表，例如： <select> <option value="option1">option 1</option> <option value="option2">option 2</option> <option value="option3">option 3</option> </select> 其次是： <select> <option value="opt

如果我有两个下拉列表，例如：

<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可用？有人告诉我需要存储这些值，但我对这一切有点迷茫

谢谢你的帮助

约翰证明：

按要求禁用，并自动选择选项

$('#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');

});

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

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

HTML

你能澄清一下你想隐藏还是禁用这些选项吗。你说禁用了，但是人们把选项藏在你需要存储的地方。说清楚。。你需要什么？记住投票并接受。OP没有要求他们被禁用Dop没有要求他们被禁用或隐藏只是不可选择。但你说的是按要求禁用，他没有特别要求他们被禁用，只有不可选择。@iambriansreed您能解释不可选择而不禁用/隐藏/删除吗？OP本身没有说禁用，但他说…只有选项9可用。。。我认为这意味着可以选择。不一定要隐藏其他选项。这就是我要求澄清的原因。如果他想删除选项，他会这么说吗？@ThulasiRam只需发布相关代码。请参阅其他答案格式作为参考。现在请尝试从第一个选择中选择任何其他内容：取消了否决票。但是有很多不必要的DOM操作。

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

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

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

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();
  }
})

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