基于另一个下拉框值的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屋！