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根据另一个下拉框值

1 个答案: