html下拉框内容变更,Javascript根据另一个下拉框值更改下拉框选项

参见英文答案 > 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