【发布时间】：2018-03-15 00:31:02
【问题描述】：
我正在创建一个在线表单，允许用户将业务客户输入数据库 - 没什么复杂的。根据为第一个问题（国家）选择的答案，应出现一个随后的下拉菜单，提示用户选择省/州，然后是另一个下拉菜单，提示用户选择该省/州内的城市。
到目前为止，没有一个条件作用。第一个问题显示国家/地区选择的下拉菜单，但选择任何选项都不会提示任何其他问题。
<script>
function displayCountry(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "China") {
document.getElementById("India").style.display = "none";
document.getElementById("USA").style.display = "none"; }
else if (answer == "India") {
document.getElementById("China").style.display = "none";
document.getElementById(USA).style.display = "none"; }
else if (answer == "USA") {
document.getElementById("China").style.display = "none";
document.getElementById("India").style.display = "none"; }
}
function displayProvince(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "Beijing Municipality") {
document.getElementById("Tianjin Municipality").style.display = "none"; }
else if (answer == "Tianjin Municipality") {
document.getElementById("Beijing Municipality").style.display = "none"; }
}
function displayChinaCity(answer) {
document.getElementById(answer).style.display = "block";
if (answer == "Beijing") {
document.getElementById("Dongcheng").style.display = "none"; }
else if (answer == "Dongcheng") {
document.getElementById("Beijing").style.display = "none"; }
}
</script>
<!-- ############################################################################-->
<div class="container">
<h3>Add Client</h3>
<div class="tab-content">
<form action="/add/clients" method="post">
<!-- ################################ Client ID ################################-->
<div class="top-row">
<div class="field-wrap">
<label>
Client ID<span class="req">*</span>
<input>
</label>
</div>
</div>
<!-- ################################ Client name #############################-->
<div class="top-row">
<div class="field-wrap">
<label>
Client name<span class="req">*</span>
<input>
</label>
</div>
</div>
<!-- ############################## Client type ##############################-->
<div class="field-wrap">
<label>
Client type<span class= "req">*</span>
<select>
<!--Removed for simplicity -->
</select></label>
</div>
<!-- ########################### Client location #############################-->
<div class="field-wrap">
<form name="feedback" action= "javascript:void(0)">
<label>Client Origin<span class="req">*</span>
<select name= "country">
<option selected= "--">--</option>
<option value= "China" onchange= "displayCountry(this.value)" value= "China">China</option>
<option value= "India" onchange= "displayCountry(this.value)" value= "India">India</option>
<option value= "USA" onchange= "displayCountry(this.value)" value= "USA">USA</option>
</select>
</label>
<div id= "China" style= "display:none;"><br/>
Select Province<span class="req">*</span>
<select name= "province">
<option selected= "--">--</option>
<option value= "Beijing Municipality" onchange= "displayProvince(this.value)" value= "Beijing Municipality">Beijing Municipality></option>
<option value= "Tianjin Municipality" onchange= "displayProvince(this.value)" value= "Tianjin Municipality">Tianjin Municipality></option>
<!--More options removed for simplicity -->
</select>
</div>
<div id= "Beijing Municipality" style= "display:none;"><br/>
Select City<span class="req">*</span>
<select name= "city">
<option selected= "--">--</option>
<option value= "Beijing" onchange= "displayChinaCity(this.value)" value= "Beijing">Beijing</option>
<option value= "Dongcheng" onchange= "displayChinaCity(this.value)" value= "Dongcheng">Dongcheng</option>
<!--More options removed for simplicity-->
</select>
</div>
<!--divs for other cities,provinces,and countries omitted for simplicity-->
</form>
</div>
</form>
</div>
</div>【问题讨论】：
-
仍然像上次一样出现语法错误（
<option />，缺少大括号...） -
我不确定你的意思。为什么使用
<option />？ -
某些 HTML 无效，例如：
<option />China</option>。 JavaScript 缺少一对右括号。 -
我更正了缺失的大括号。关于
<option>标签，我认为这是有效的？还是我需要使用<option value="China">China</option> -
是的，就是这样。如需参考，请参阅
<select>。
标签： javascript html