如何在用户更改一个选择时更新多个下拉选择

Question

我有一些 HTML/jQuery 代码可以显示三个菜单。当用户更改第一个菜单中的选择时，第二个菜单将重新加载。当用户更改第二个菜单中的选择时，第三个菜单将重新加载。我真正想要的是在更改 menu1 选择时重新加载 menu2 和 menu3，并在重置 menu2 选择时重新加载 menu3。我不知道该怎么做的是让我的匿名追加函数重新加载多个菜单的选择集。此外，我想概括代码，以便当人更新 menu(n) 时，右侧的菜单 menu(n+1)、menu(n+2)... 都会更新。否则，我的代码将无法扩展。谢谢。

这是我的代码。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
   var selectValues = {
      "1": {
         "1-1": "1-1",
         "1-2": "1-2"
      },
      "2": {
         "2-1": "2-1",
         "2-2": "2-2"
       },
      "1-1": {
         "1-1-1": "1-1-1",
         "1-1-2": "1-1-2"
      },
      "1-2": {
         "1-2-1": "1-2-1",
         "1-2-2": "1-2-2"
      },
      "2-1": {
         "2-1-1": "2-1-1",
         "2-1-2": "2-1-2"
      },
      "2-2": {
         "2-2-1": "2-2-1",
         "2-2-2": "2-2-2"
      }
   };
   var $menu1 = $('select.menu-1');
   var $menu2 = $('select.menu-2');
   var $menu3 = $('select.menu-3');
   $menu1.change(function() {
      $menu2.empty().append(function() {
         var output = '';
         $.each(selectValues[$menu1.val()], function(key, value) {
             output += '<option>' + key + '</option>';
         });
         return output;
      });
   }).change();
   $menu2.change(function() {
      $menu3.empty().append(function() {
         var output = '';
         $.each(selectValues[$menu2.val()], function(key, value) {
             output += '<option>' + key + '</option>';
         });
         return output;
      });
   }).change();
});
</script>
</head>
<body>

<select class="menu-1">
   <option value="1">1</option>
   <option value="2">2</option>
</select>

<select class="menu-2">
   <option></option>
</select>
<select class="menu-3">
   <option></option>
</select>
</body>
</html>

这里是fiddle。

3 月 15 日更新。

我采纳了 Jake Wolpert 的想法并做了一些修改，但仍然没有成功。

这是我的新 HTML:

<div class="menu">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select>
        <option></option>
    </select>
    <select>
        <option></option>
    </select>
</div>

这是我的新 jQuery 代码，我尝试使用 nextAll 在用户更改菜单后重置所有菜单。

var $menus = $(".menu select")
$menus.change(function(){
   var val = $(this).val() 
   console.log(val, $menus.index(this) )

    $(this).nextAll().empty().html(function(){
        var output = '';
        $.each(selectValues[val], function (key, value) {
            output += '<option>' + key + '</option>';
        });
        return output;
    })
}).first().change()

这是下一个 fiddle 迭代。

https://jsfiddle.net/xxxfqtzj/4/

问题在于 nextAll 中的代码使用 val 作为 selectValues 的索引，因此当我更改第一个菜单时，第二个和第三个菜单会加载相同的菜单。我需要以某种方式获取我正在处理的菜单的索引，并使用递增索引引用的 selectValues 中的值加载下一个菜单。

Answer 1

如果你想让它缩放，你不能假装知道你有多少菜单。

https://jsfiddle.net/jakecigar/xxxfqtzj/3/不在乎有多少菜单，只在乎一个接一个。

var $menus = $(".menu select")
$menus.change(function(){
   var val = $(this).val() 
   console.log(val, $menus.index(this) )

    $(this).next().empty().prop({disabled:false}).html(function(){
        var output = '';
        $.each(selectValues[val], function (key, value) {
            output += '<option>' + key + '</option>';
        });
        return output;
    }).nextAll().prop({disabled:true}).empty()
}).first().change()

如何在用户更改一个选择时更新多个下拉选择

How to update multiple dropdown selects when user changes one selection

html

jquery

drop-down-menu