（修改JSFiddle）如何使下拉框仅可见，具体取决于您在上一个下拉框中选择的内容？

Question

这就是我作为基础使用的：https://jsfiddle.net/patelriki13/m1ezs70o/

但相反，我试图这样做，以便国家下拉列表下方的下拉列表不会出现在你选择一个国家的情况下。此外，我想添加第三个国家/地区选项，如果您选择它，下一个下拉框将保持隐藏状态。

请问有什么帮助吗？

HTML：

<form name="myform" id="myForm">
  <select id="countySel" size="1">
    <option value="" selected="selected">-- Select Country --</option>
  </select>
  <br>
  <br>
  <select id="stateSel" size="1">
    <option value="" selected="selected">-- Select State--</option>
  </select>
  <br>
  <br>
  <select id="citySel" size="1">
    <option value="" selected="selected">-- Select City--</option>
  </select>
  <br>
  <br>
  <select id="zipSel" size="1">
    <option value="" selected="selected">-- Select Zip--</option>
  </select>
</form>

JavaScript的：

var countryStateInfo = {
  "USA": {
    "California": {
      "Los Angeles": ["90001", "90002", "90003", "90004"],
      "San Diego": ["92093", "92101"]
    },
    "Texas": {
      "Dallas": ["75201", "75202"],
      "Austin": ["73301", "73344"]
    }
  },
  "India": {
    "Assam": {
      "Dispur": ["781005"],
      "Guwahati": ["781030", "781030"]
    },
    "Gujarat": {
      "Vadodara": ["390011", "390020"],
      "Surat": ["395006", "395002"]
    }
  }
}

window.onload = function() {
  //Get html elements
  var countySel = document.getElementById("countySel");
  var stateSel = document.getElementById("stateSel");
  var citySel = document.getElementById("citySel");
  var zipSel = document.getElementById("zipSel");

  //Load countries
  for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
  }

  //County Changed
  countySel.onchange = function() {
    stateSel.length = 1; // remove all options bar first
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var state in countryStateInfo[this.value]) {
      stateSel.options[stateSel.options.length] = new Option(state, state);
    }
  }

  //State Changed
  stateSel.onchange = function() {
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var city in countryStateInfo[countySel.value][this.value]) {
      citySel.options[citySel.options.length] = new Option(city, city);
    }
  }

  //City Changed
  citySel.onchange = function() {
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
    for (var i = 0; i < zips.length; i++) {
      zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
    }
  }
}

Answer 1

我很快就为你写了这封。您可以升级它并使其更加优化。

您可以找到添加到代码中的一些切换功能以及调用它们的一些代码行。

var countryStateInfo = {
  "USA": {
    "California": {
      "Los Angeles": ["90001", "90002", "90003", "90004"],
      "San Diego": ["92093", "92101"]
    },
    "Texas": {
      "Dallas": ["75201", "75202"],
      "Austin": ["73301", "73344"]
    }
  },
  "India": {
    "Assam": {
      "Dispur": ["781005"],
      "Guwahati": ["781030", "781030"]
    },
    "Gujarat": {
      "Vadodara": ["390011", "390020"],
      "Surat": ["395006", "395002"]
    }
  }
}

window.onload = function() {
  //Get html elements
  var countySel = document.getElementById("countySel");
  var stateSel = document.getElementById("stateSel");
  var citySel = document.getElementById("citySel");
  var zipSel = document.getElementById("zipSel");

  //Load countries
  for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
  }

  //County Changed
  countySel.onchange = function() {
    stateSel.length = 1; // remove all options bar first
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1) {
      toggleState(false);
      return; // done
    }
    toggleState(true);

    for (var state in countryStateInfo[this.value]) {
      stateSel.options[stateSel.options.length] = new Option(state, state);
    }
  }

  //State Changed
  stateSel.onchange = function() {
    citySel.length = 1; // remove all options bar first
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1) {
      toggleCity(false);
      return; // done
    }
    toggleCity(true);

    for (var city in countryStateInfo[countySel.value][this.value]) {
      citySel.options[citySel.options.length] = new Option(city, city);
    }
  }

  //City Changed
  citySel.onchange = function() {
    zipSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1) {
      toggleZip(false);
      return; // done
    }
    toggleZip(true);

    var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
    for (var i = 0; i < zips.length; i++) {
      zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
    }
  }

  function toggleState(show) {
    show = show || false;
    if (show) {
      stateSel.style.display = '';
      return;
    }
    stateSel.style.display = 'none';
    toggleCity(show);
  }

  function toggleCity(show) {
    show = show || false;
    if (show) {
      citySel.style.display = '';
      return;
    }
    citySel.style.display = 'none';
    toggleZip(show);
  }

  function toggleZip(show) {
    show = show || false;
    if (show) {
      zipSel.style.display = '';
      return;
    }
    zipSel.style.display = 'none';
  }

  var event = new Event('change');
  countySel.dispatchEvent(event);
}

<form name="myform" id="myForm">
  <select id="countySel" size="1">
    <option value="" selected="selected">-- Select Country --</option>
  </select>
  <br>
  <br>
  <select id="stateSel" size="1">
    <option value="" selected="selected">-- Select State--</option>
  </select>
  <br>
  <br>
  <select id="citySel" size="1">
    <option value="" selected="selected">-- Select City--</option>
  </select>
  <br>
  <br>
  <select id="zipSel" size="1">
    <option value="" selected="selected">-- Select Zip--</option>
  </select>
</form>