如何创建链式下拉列表并根据城市/州动态显示结果？ [关闭]答案

【问题标题】：How to create a chained dropdown and dynamically display results based on city/state? [closed]如何创建链式下拉列表并根据城市/州动态显示结果？ [关闭]
【发布时间】：2016-01-05 03:40:44
【问题描述】：

我需要 2 个链接的下拉列表，城市和州，它们会在选择城市后填充列表。因此，基本上用户会看到一个下拉菜单来选择一个州（美国），这将导致另一个下拉菜单来选择城市。选择城市后，它会填充我根据城市/州选择创建的列表。这是一个 WordPress 网站，我希望有人可能知道有一个插件可以让这更容易。该列表将相当大，因此如果可能，我更愿意在 WordPress 的后端进行，但如果必须，我可以在带有 HTML 的模板文件中完成所有操作。有没有人遇到过类似的事情？什么可能是一个好的解决方案，WP 插件或其他？

【问题讨论】：

很多客户端插件和教程围绕这个

标签： javascript php jquery html wordpress

【解决方案1】：

我想你想要这样的东西：

var citiesByState = {
  USA: ["NY", "NJ"],
  Singapore: ["taas", "naas"]
}

function makeSubmenu(value) {
  if (value.length == 0) document.getElementById("citySelect").innerHTML = "<option></option>";
  else {
    var citiesOptions = "";
    for (cityId in citiesByState[value]) {
      citiesOptions += "<option>" + citiesByState[value][cityId] + "</option>";
    }
    document.getElementById("citySelect").innerHTML = citiesOptions;
  }
}

function resetSelection() {
  document.getElementById("countrySelect").selectedIndex = 0;
  document.getElementById("citySelect").selectedIndex = 0;
}

<body onload="resetSelection()">
  <select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
    <option></option>
    <option>USA</option>
    <option>Singapore</option>
  </select>
  <select id="citySelect" size="1">
    <option></option>
  </select>
</body>

注意：您在 HTML 中添加的选项，如 <option>India</option>，在 JavaScript array 中必须具有相同的名称和相同的大小写，如 India: ["Gujarat","AP"]

更新：

var citiesByState = {
    USA: ["NY", "NJ"],
    Singapore: ["taas", "naas"]
}

function makeSubmenu(value) {
    if (value.length == 0) document.getElementById("citySelect").innerHTML = "<option></option>";
    else {
        var citiesOptions = "";
        for (cityId in citiesByState[value]) {
            citiesOptions += "<option id=" + citiesByState[value][cityId] + ">" + citiesByState[value][cityId] + "</option>";
        }
        document.getElementById("citySelect").innerHTML = citiesOptions;
    }
}

function makeDisplay(curId)
{
   var curId = curId[curId.selectedIndex].id;
   var elements = document.getElementsByClassName('allbox');
    for (var i = 0; i < elements.length; i++){
        elements[i].style.display = 'none';
    }
   document.getElementById('box'+ curId + '').style.display = 'block';
}

.allbox {
    display:none;
}

<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
    <option disabled selected ></option>
    <option>USA</option>
    <option>Singapore</option>
</select>
<select id="citySelect" size="1" onchange="makeDisplay(this)">
    <option></option>
</select>
<div class="allbox" id="boxNY">Some Text... for Ny</div>

<div class="allbox" id="boxNJ">Some Text... for NJ</div>

【讨论】：

我发现了几个插件让我走到了这一步，但是如果我选择说 USA > NY，我将如何显示
Test1
？
这个 div 是否独立于页面上的选择框？
是的。纽约的 div 中会有一个列表，LA 的 div 中会有一个列表等，需要在选择该城市后显示。
@jfoutch 我已经更新了答案，sn-p 刚刚向您展示了 NY 和 NJ 的演示。不过，如果您有任何问题，请随时提出。
是的，感谢您帮助我理解这一点。现在我可以查看您的代码并准确了解发生了什么。