如何创建链接的下拉列表并根据城市/州动态显示结果? [英] How to create a chained dropdown and dynamically display results based on city/state?
问题描述
我需要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>，必须在JavaScriptarray中具有相同的名称和大小写，例如，India: ["Gujarat","AP"]
Note: The options you add in HTML like
<option>India</option>must have same name and same cases in JavaScriptarraylikeIndia: ["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>
这篇关于如何创建链接的下拉列表并根据城市/州动态显示结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
