当用户更改一个选择时如何更新多个下拉选项
我有一些HTML/jQuery代码，它显示了三个菜单。当用户更改第一个菜单中的选择时，第二个菜单将重新加载。当用户更改第二个菜单中的选择时，第三个菜单将被重新加载。我真正想要的是在更改menu2和menu3选择时重新加载menu1，在重置menu2选择时重新加载menu3。我不知道如何做的是让我的匿名附加函数重新加载多个菜单的选择设置。另外，我想概括一下代码，这样当菜单(N)由一个人更新时，菜单就在右边，菜单(n+1)，菜单(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>这是一个小提琴。
更新3/15。
我采纳了杰克·沃尔伯特的想法，做了几处修改，但还是没有运气。
这是我的新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中加载下一个菜单中的值，这些值由递增的索引引用。
回答 1
Stack Overflow用户
发布于 2015-03-15 17:08:16
如果你想让它缩放，你不能假装知道你有多少菜单。
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()https://stackoverflow.com/questions/29053525
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号