我试图做级联下拉框4个领域，而不是选择在一套秩序（即。国家，州，城市，邮编），我希望能够选择在任何可能的顺序（即。选择城市第一，所有其他下拉菜单的选项更新）。有人能为我指出寻找潜在资源/选择的正确方向吗？还有，有没有一个术语来描述这个，因为我假设它将不再随着这个变化而级联？
在下面的例子中，我有两个州与城市波特兰。目前，我可以选择国家（美国），然后无论是缅因州州或俄勒冈州州和波特兰将是城市的选项之一。我想它，所以在页面加载，每个选择框的所有潜在选项加载，所以我可以选择选择城市-波特兰第一和国家，国家和邮编选项将更新，以反映过滤的选项。
4下拉菜单-国家、州、城市、邮编
<select id="country" onchange="updateState()">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="India">India</option>
</select>
<label for="state">State:</label>
<select id="state" onchange="updateCity()">
<option value="">Select State</option>
</select>
<label for="city">City:</label>
<select id="city" onchange="updateZip()">
<option value="">Select City</option>
</select>
<label for="zip">Zip:</label>
<select id="zip">
<option value="">Select Zip</option>
</select>var countryStateInfo.在本例中，您可以看到波特兰有2个城市- 1个在缅因州，1个在俄勒冈州。
var countryStateInfo = {
"USA": {
"California": {
"Los Angeles": ["90001", "90002", "90003", "90004"],
"San Diego": ["92093", "92101"]
},
"Maine": {
"Portland": ["04101"],
"Augusta": ["04330"]
},
"Oregon": {
"Portland": ["97035","97203"],
"Eugene": ["97404"]
}
},
"India": {
"Assam": {
"Dispur": ["781005"],
"Guwahati" : ["781030", "781030"]
},
"Gujarat": {
"Vadodara" : ["390011", "390020"],
"Surat" : ["395006", "395002"]
}
}
}处理级联过滤的当前JavaScript代码（仅在1个方向上）
const countrySelect = document.getElementById("country");
const stateSelect = document.getElementById("state");
const citySelect = document.getElementById("city");
const zipSelect = document.getElementById("zip");
// Update the state
function updateState() {
stateSelect.innerHTML = "<option value=''>Select State</option>";
citySelect.innerHTML = "<option value=''>Select City</option>";
zipSelect.innerHTML = "<option value=''>Select Zip</option>";
const selectedCountry = countrySelect.value;
if (selectedCountry !== "") {
const states = countryStateInfo[selectedCountry];
for (const state in states) {
const option = document.createElement("option");
option.value = state;
option.textContent = state;
stateSelect.appendChild(option);
}
}
}
// Update the city
function updateCity() {
citySelect.innerHTML = "<option value=''>Select City</option>";
zipSelect.innerHTML = "<option value=''>Select Zip</option>";
const selectedCountry = countrySelect.value;
const selectedState = stateSelect.value;
if (selectedCountry !== "" && selectedState !== "") {
const cities = countryStateInfo[selectedCountry][selectedState];
for (const city in cities) {
const option = document.createElement("option");
option.value = city;
option.textContent = city;
citySelect.appendChild(option);
}
}
}
// Update the zip
function updateZip() {
zipSelect.innerHTML = "<option value=''>Select Zip</option>";
const selectedCountry = countrySelect.value;
const selectedState = stateSelect.value;
const selectedCity = citySelect.value;
if (
selectedCountry !== "" &&
selectedState !== "" &&
selectedCity !== ""
) {
const zips = countryStateInfo[selectedCountry][selectedState][selectedCity];
for (const zip of zips) {
const option = document.createElement("option");
option.value = zip;
option.textContent = zip;
zipSelect.appendChild(option);
}
}
}
1条答案
按热度按时间zysjyyx41#
我已经修复了代码。JavaScript代码不会等到元素加载后才按ID抓取元素，因此它们包含
null。要解决这个问题，可以使用var countrySelect;将变量定义为空，然后使用window.onload = function(){ [give them values] };强制JavaScript在抓取之前等待。别担心，很多程序员每天都在遭受这种痛苦。如果您可以使用错误识别来查找，则可以使用联机帮助来识别这些问题。