<分区>
我正在练习用 JavaScript 编程,我发现了一个关于 drop-down
框的问题,必须由一些专家来回答。
场景是:
我有一个下拉
框,它为各省提供了一些可能的选项,还有第二个(城镇),它仅取决于在各省下拉菜单中选择的内容
.
在 JavaScript 中有没有一种方法,当我在省份之间进行选择时,第二个 下拉菜单
给出所选省份的选项?
<分区>
我正在练习用 JavaScript 编程,我发现了一个关于 drop-down
框的问题,必须由一些专家来回答。
场景是:
我有一个下拉
框,它为各省提供了一些可能的选项,还有第二个(城镇),它仅取决于在各省下拉菜单中选择的内容
.
在 JavaScript 中有没有一种方法,当我在省份之间进行选择时,第二个 下拉菜单
给出所选省份的选项?
最佳答案
这是一个简单的示例,可以帮助您入门。
它的工作原理是将 change
事件的事件监听器附加到省下拉列表,然后通过 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 += '<option name="' + value + '">' + value + '</option>';
});
}
};
<select id="prov"></select>
<select id="town"></select>
关于Javascript根据另一个下拉框值更改下拉框选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29802104/