当用户更改一个选项时，如何更新多个下拉菜单 [英] How to update multiple dropdown selects when user changes one selection
问题描述
这是我的代码。
< 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>';
}）;
返回输出;
}）;
}）。change（）;
$ menu2.change（function（）{
$ menu3.empty（）。append（function（）{
var output ='';
$ .each（selectValues [ $ menu2.val（）]，function（key，value）{
output + ='< option>'+ key +'< / option>';
}）;
返回输出;
}）;
}）。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。
我拿过Jake Wolpert的想法，做了几个修改，但还没有运气
这是我的新HTML：
< div class = 菜单 >
< select>
< option value =1> 1< / option>
< option value =2> 2< / option>
< / select>
< select>
< option>< / option>
< / select>
< select>
< option>< / option>
< / select>
< / div>
这是我的新的jQuery代码，我尝试使用nextAll重置所有菜单后，用户更改。
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
var val = $（this）.val（）
console.log（val，$ menus.index（this））
$（this）.nextAll（）。 empty（）。html（function（）{
var output ='';
$ .each（selectValues [val]，function（key，value）{
output + ='选项>'+ key +'< / option>';
}）;
返回输出;
}）
}）。 $ b
这是下一个小提琴的迭代。
< a href =https://jsfiddle.net/xxxfqtzj/4/ =nofollow> https://jsfiddle.net/xxxfqtzj/4/
问题是nextAll里面的代码是使用val作为selectionValues的索引，这样当我改变第一个菜单时，第二个和第三个菜单加载了相同的菜单nto他们我需要以某种方式获取我正在处理的菜单的索引，并使用该增量索引引用的selectValues中的值加载下一个菜单。
如果你想要缩放，你不能假装知道你有多少个菜单。
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）
输出+ ='< option>'+ key +'< / option>';
}）;
返回输出;
}）nextAll（） （{DIS abled：true}）。empty（）
}）。first（）。change（）
I've got some HTML/jQuery code that displays three menus. When the user changes the selection in the first menu then the second menu gets reloaded. When the users changes the selection in the second menu then the third menu gets reloaded. What I really want is to reload menu2 and menu3 when the menu1 selection is changed and reload menu3 when the menu2 selection is reset. What I don't know how to do is have my anonymous append function reload the selection set for more than one menu. Additionally, I'd like to generalize the code so that when menu(n) is updated by a human then the menus to the right, menu(n+1), menu(n+2), ... are all updated. Otherwise, my code won't scale. Thanks.
Here is my code.
<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>
Here is a fiddle.
Update 3/15.
I took Jake Wolpert's idea and made a couple of modifications but still no luck.
Here's my new 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>
Here's my new jQuery code, where I try using nextAll to reset all menus after the one the user changed.
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()
Here is the next fiddle iteration.
https://jsfiddle.net/xxxfqtzj/4/
The problem is that the code inside nextAll is using val as the index to selectValues so that when I change the first menu the second and third ones get the same menus loaded into them. I need to somehow get the index of the menu that I'm processing and load the next menu with values in selectValues that are referenced by that incrementing index.
If you want it to scale, you can’t pretend to know how many menus you have.
https://jsfiddle.net/jakecigar/xxxfqtzj/3/ Does not care about how many menus, just that they are one after another.
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()
这篇关于当用户更改一个选项时，如何更新多个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
