{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ら.Afraid 的问题《How to update multiple dropdown selects when user》','https://www.manongdao.com/q-1088734.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.