如何创建链接的下拉列表并根据城市/州动态显示结果?

问题描述：

我需要2个链接的下拉菜单，城市和州，在选择城市后会填充一个列表.因此，基本上，将向用户显示选择州(美国)的下拉菜单，这将导致另一个选择城市的下拉菜单.选择城市后，它将填充我根据城市/州选择创建的列表.这是一个WordPress网站，我希望有一个别人可能知道的插件可以使此操作更容易.该列表将很大，因此，如果可能的话，我宁愿在WordPress的后端中进行处理，但是如果需要的话，我可以在带有HTML的模板文件中进行全部处理.有没有人遇到过类似的事情? WP插件还是其他更好的解决方案是什么?

I need 2 chained dropdowns, city and state, that would populate a list after choosing the city. So basically a user would be presented with a dropdown to choose a state (US) which would lead to another dropdown to choose the city. After choosing the city it would populate a list that I would have created based on the city/state choice. It is a WordPress site and I was hoping there is a plugin that someone might know of to make this easier. The list will be rather large so I'd prefer to do it in the backend of WordPress if possible, but I can do it all in a template file with HTML if I have to. Has anyone encountered anything similar? What might a good solution be, WP plugin or other?

答

我认为您想要这样的东西:

I think you want something like this:

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"]

Note: The options you add in HTML like <option>India</option> must have same name and same cases in JavaScript array like 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>

如何创建链接的下拉列表并根据城市/州动态显示结果?

相关推荐