当用户更改一个选择时如何更新多个下拉选择答案

【问题标题】：How to update multiple dropdown selects when user changes one selection当用户更改一个选择时如何更新多个下拉选择
【发布时间】：2015-03-14 19:57:28
【问题描述】：

我有一些显示三个菜单的 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()

这是下一个小提琴迭代。

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

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

【问题讨论】：

标签： jquery html drop-down-menu

【解决方案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()

【讨论】：

这很接近，但禁用菜单并不能正常工作。如果第二个菜单设置为 2-1 并且第三个菜单被禁用，那么我必须将 2-1 菜单更改为 2-2 并将其更改回 2-1 以使第三个菜单不被禁用。我有一个更新，我会根据你的代码发布，但也不太正常。
我明白你的意思，我添加了 var output = '';所以你可以选择第一个实物期权。我还删除了禁用。 jsfiddle.net/jakecigar/xxxfqtzj/5