参见英文答案 > Populate one dropdown based on selection in another 3个
我正在练习JavaScript编程,我发现了一些问题,一些专家必须回答有关下拉框的问题.
情景是：
我有一个下拉框,为省份和第二个(城镇)提供了一些可能的选项,这仅取决于省份下拉菜单中选择的内容.
有没有一种方法在JavaScript中,当我在各省之间选择时,第二个下拉菜单给出了所选省份的选项？
解决方法:
这是一个简单的例子,可以帮助您入门.
它的工作原理是将更改事件的事件监听器附加到省下拉列表,然后通过provs对象查找该省的城镇.
有关每行的详细说明,请参阅注释.
window.onload = function() {
// provs is an object but you can think of it as a lookup table
var provs = {
'British Columbia': ['Victoria', 'Sanitch'],
'Ontario': ['Bracebridge', 'Waterloo']
},
// just grab references to the two drop-downs
prov_select = document.querySelector('#prov'),
town_select = document.querySelector('#town');
// populate the provinces drop-down
setOptions(prov_select, Object.keys(provs));
// populate the town drop-down
setOptions(town_select, provs[prov_select.value]);
// attach a change event listener to the provinces drop-down
prov_select.addEventListener('change', function() {
// get the towns in the selected province
setOptions(town_select, provs[prov_select.value]);
});
function setOptions(dropDown, options) {
// clear out any existing values
dropDown.innerHTML = '';
// insert the new options into the drop-down
options.forEach(function(value) {
dropDown.innerHTML += '' + value + '';
});
}
};
标签：javascript,drop-down-menu,forms
来源： https://codeday.me/bug/20190702/1360517.html