（修改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>