4
我正在使用JavaScript进行编程,并且我发现一些问题必须由专家对drop-down
框进行回答。基于另一个下拉框的值更改了下拉框选项
的情况是:
我有一个drop-down
框,给出了各省的一些可能的选项,同时仅取决于什么是在各省drop-down
选择的第二个(镇)。
JavaScript中有一种方法,当我在省份之间选择时,第二个drop-down
给出了所选省份的选项吗?
我正在使用JavaScript进行编程,并且我发现一些问题必须由专家对drop-down
框进行回答。基于另一个下拉框的值更改了下拉框选项
的情况是:
我有一个drop-down
框,给出了各省的一些可能的选项,同时仅取决于什么是在各省drop-down
选择的第二个(镇)。
JavaScript中有一种方法,当我在省份之间选择时,第二个drop-down
给出了所选省份的选项吗?
这是一个简单的例子,让你开始。
它通过将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>
有你累了什么? – meskobalazs
我认为“必须由专家回答”有点强,谷歌本来可能有你在那里 – MuppetGrinder
呦可以在这里找到答案全部已准备好: http://stackoverflow.com/questions/5686735/populate-one-dropdown基于选择的另一种Alltrough,我会使用Jquery来简化。 – MrKekson