JavaScript 根据另一个下拉框的值改变下拉框选项

Question

我正在练习JavaScript编程，遇到一个问题需要专家解答。这个问题与下拉框有关。

情景如下：

我有一个下拉框，提供了一些省份的可能选项，还有第二个下拉框(城镇)，它仅依赖于在省份下拉框中所选的内容。

是否有一种方法可以在JavaScript中实现，当我选择省份时，第二个下拉框会给出所选省份的选项？

- arreojn

---

你尝试过什么吗？ - meskobalazs

我认为“必须由专家回答”有点过于强硬了，Google可能已经可以帮到你了。 - MuppetGrinder

你可以在这里找到答案：https://dev59.com/oW025IYBdhLWcg3w_a-r虽然，为了简单起见，我会使用Jquery。 - MrKekson

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>

- robbmj