我是 javascript 新手，必须查看这里和其他地方与此问题相关的几乎所有以前的问题，但似乎没有一个能解决问题，因为它们使用 asp、php、Ajax 等。我将 jQuery 代码用于其他几个项目页面，并发现他们的 css 会导致我的页面出现问题，而且我也不热衷于使用它。就我而言，有没有办法从下拉框中选择一个国家/地区，然后显示一个带有该国家/地区的州或省的下拉框。我的代码如下所示，但是当我运行它时，它会显示所有 DIV，而不仅仅是适用于所选国家/地区的 DIV。如果一个国家没有州/省，它将只显示 0 值。我想知道此代码有什么问题。第二个问题是，页面以默认国家/地区及其州/省开始，但由于我在国家/地区选择上使用 onChange，因此不会触发 javascript，因为最初没有更改。无论如何，即使我确实更改了默认国家/地区，无论如何都会显示所有 DIV。是否可以显示默认国家/地区的州/省，并仍然使用 javascript 对默认选择所做的任何更改。它没有在下面的示例中显示这一点，但国家和相关州/省的值来自数据库，因此不能合并到 javascript 中。任何帮助或建议将不胜感激。<TABLE> <TR><TD>Country</DIV></TD> <TD><SELECT NAME="countryid" onChange="showstate(this.options[this.selectedIndex].value)"> <OPTION VALUE="NONE">Select a country</OPTION> <OPTION VALUE="CA" SELECTED>Canada</OPTION> <OPTION VALUE="US">United States</OPTION> <OPTION VALUE="ES">Spain</OPTION> </SELECT></TD> </TR><script> function showstate(country) { if (country == "CA") { hiddenDivUS.style.display='none'; hiddenDivNONE.style.display='none'; hiddenDivCA.style.display='block'; } else { if (country == "US") { hiddenDivCA.style.display='none'; hiddenDivNONE.style.display='none'; hiddenDivUS.style.display='block'; } else { hiddenDivCA.style.display='none'; hiddenDivUS.style.display='none'; hiddenDivNONE.style.display='block'; } } </script> <DIV ID="hiddenDivNONE" STYLE="display:none"> <TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD> <TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"></TD> </TR> </DIV> <DIV ID="hiddenDivCA" STYLE="display:none"> <TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD> <TD><SELECT NAME="provid"> <OPTION VALUE="101">British Columbia</OPTION> ....... <OPTION VALUE="165">Yukon Territories</OPTION> </SELECT></TD> </TR> </DIV>它没有列出正确的 DIV，而是显示了所有三个
3 回答
慕田峪4524236
TA贡献1875条经验 获得超5个赞
我想出了如何获得所需的结果（见下面的代码）
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
function showStates(country)
{
if (country == "101")
{ document.getElementById('CAprov').style.display='block';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='none';
}
else if (country == "102")
{ document.getElementById('CAprov').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='block';
document.getElementById('NoProv').style.display='none';
}
else
{ document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('NoProv').style.display='block';
}
return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
<TR><TD>Country</TD>
<TD><SELECT NAME="country" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
<OPTION VALUE="101" SELECTED>Canada</OPTION>
<OPTION VALUE="102">United States</OPTION>
<OPTION VALUE="314">Germany</OPTION>
</SELECT></TD></TR>
<TR ID="Default" STYLE="display: block;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="CAprov" STYLE="display: none;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="USstate" STYLE="display: none;"><TD>State</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD></TR>
<TR ID="NoProv" STYLE="display: none;"><TD>Prov/State</TD>
<TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
慕的地10843
TA贡献1785条经验 获得超8个赞
根据我的说法，这可以解决您的问题。你可以对代码做一些我没有做的改动。
function addStates() {
var selectCountry = document.getElementById("selectCountry").value;
console.log(selectCountry);
var selectState = document.getElementById("selectState");
if (selectCountry == "india") {
var option1 = document.createElement("option");
option1.value = "punjab";
option1.text = "Punjab";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "karnataka";
option2.text = "Karnataka";
selectState.add(option2);
} else if (selectCountry == "usa") {
var option1 = document.createElement("option");
option1.value = "florida";
option1.text = "Florida";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "california";
option2.text = "California";
selectState.add(option2);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div>
<span>Select a country: </span>
</div>
<div>
<select onchange="addStates()" id="selectCountry">
<option value="" selected disabled>Please select a country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div>
<div>
<span>Please select a state: </span>
</div>
<div>
<select id="selectState">
</select>
</div>
</div>
</body>
</html>
慕桂英546537
TA贡献1848条经验 获得超10个赞
首先，小心你的首都。
其次尽量让所有js都在页面底部。
这段代码使用 ES6，所以你可能想检查它是否适用于所有浏览器，但你可以看到发生了什么。
然而大多数浏览器都支持 el.classList add，remove并且toggle不支持（现在不确定）
我使用了一些正则表达式来获取所有使用 id 的元素，state_这样我们就可以隐藏它们，然后我们瞄准确切的一个以使其可见，你也可以清理它。
<style>
.hidden {
display: none;
}
</style>
<select name="countryid" onChange="showState(event)">
<option value="">Select a country</option>
<option value="ca">Canada</option>
<option value="us">United States</option>
<option value="es">Spain</option>
</select>
<div id="state_ca" class="hidden">
This is hidden unless Canada is selected.
</div>
<div id="state_us" class="hidden">
This is hidden unless America is selected.
</div>
<script>
function showState(event) {
const countryCode = event.target.value;
const states = document.querySelectorAll('[id^=state_]');
const el = document.getElementById(`state_${countryCode}`);
states.forEach(el => {
if (el.classList.contains('hidden')) {
return;
}
el.classList.add('hidden');
});
if (el) {
el.classList.remove('hidden');
}
}
</script>
添加回答
举报
0/150
提交
取消