Javascript 根据另一个下拉框值更改下拉框选项

Question

我正在 JavaScript 练习编程，我发现了一个必须由一些专家回答的关于 drop-down 盒子的问题。

场景是：

我有一个 drop-down 框，它为省份提供了一些可能的选项，还有第二个框（城镇），它仅取决于在省份 drop-down.

中选择的内容

JavaScript有没有办法让我在选择省份时，第二个drop-down给出所选省份的选项？

Answer 1

这是一个简单的示例，可以帮助您入门。

它的工作原理是将 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 根据另一个下拉框值更改下拉框选项

Javascript change drop-down box options based on another drop-down box value

javascript

forms

drop-down-menu