基于另一个下拉框值的Javascript更改下拉框选项 [英] Javascript change drop-down box options based on another drop-down box value
问题描述
$ b $ b
情景是:
我有一个下拉列表
框,提供了一些可能的选项对于省份,还有第二个(城镇),其仅取决于省份下拉菜单
中选择的内容。
在JavaScript中有一种方法,当我在省份之间选择时,第二个下拉菜单
给出了所选省份的选项?
这是一个简单的例子,让你开始。
它的工作原理是附加一个事件监听器更改
事件到省下拉菜单,然后通过 provs
对象查找该省的哪些城镇。
请参阅意见,详细说明每一行的作用。
window.onload = function(){//证明是一个对象,但你可以把它看作是一个查找表var provs = {'不列颠哥伦比亚省':['维多利亚州','桑奇'],'安大略省':['Bracebridge','滑铁卢'}} //只需抓住对两个下拉菜单的引用:prov_select = document.querySelector('#prov'),town_select = document.querySelector('#town'); //填充各省下拉菜单setOptions(prov_select,Object.keys(provs)); //填充镇下拉菜单setOptions(town_select,provs [prov_select.value]); //将更改事件侦听器附加到省下拉菜单prov_select.addEventListener('change',function(){//获取所选省份中的城镇setOptions(town_select,provs [prov_select.value]);});函数setOptions(dropDown,options){//清除任何现有值dropDown.innerHTML =''; //将新选项插入到下拉式选项中.forEach(function(value){dropDown.innerHTML + ='< option name ='+ value +'>'+ value +'< / option> ';}); }};
< select id =prov> ;< / select>< select id =town>< / select>
I am practising programming in JavaScript and I have found a problem that must be answered by some experts regarding drop-down
boxes.
The Scenario is:
I have a drop-down
box that gives some possible options for provinces and also a second one (town) which depends only on what is selected in the provinces drop-down
.
Is there a way in JavaScript that when I chose among provinces, the second drop-down
gives the options from the province selected?
Here is a simple example to get you started.
It works by attaching an event listener for the change
event to the province dropdown, then looks up what towns are in that province via the provs
object.
See the comments for a detailed explanation of what each line does.
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更改下拉框选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!