隐藏/显示Div代码对下拉框选项不起作用

Question

我知道这个问题被问了很多次，我实际上从另一个帖子得到了答案，但是现在我已经编写了适合我需要的代码，当点击特定的下拉选择时，它根本不显示div。我真的很喜欢这种方法，因为代码对我更有意义，但我不确定我做错了什么。我正在设置一个表单，并希望有几个问题，用户将选择一个选项，然后一个特定的问题将显示下面问一个或多个特定的问题。我在其他地方用是/否单选按钮这样做了，但我需要用三个选项来做到这一点，这将导致三个单独的查询以获得更多信息，以及另一个选择，他们可以选择保持原样而不回答。

javascript代码如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>">
<script>
function landaccessfunction(){
getValue = document.getElementById("access").value;
if(getValue == "road"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "easement"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "noaccess"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "block";
}
if(getValue == "selectaccess"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "block";
}
}
</script>

然后是放置在body标签和表单本身中的代码部分:

How is the land accessed?
<select style="height:24px;font-size:12pt; name="access" id="access" onchange="landaccessfunction" class="form-control" form="landform">
<option value="selectaccess">Select One</option>
<option value="road">Direct road access</option>
<option value="easement">A legally deeded easement</option>
<option value="noaccess">No legal access</option>
</select> 

<div class=text" id="roaddetails" style="display:none;">                
Who owns the road?<br><input style="height:20px;font-size:12pt; name="roadowner" type="text" id="roadowner" form="landform" size="50">
</div>
<div class=text" id="easementdetails" style="display:none;">                
Describe easement<br><input style="height:20px;font-size:12pt; name="easedescr" type="text" id="easedescr" form="landform" size="50">
</div>
<div class=text" id="noaccessdetails" style="display:none;">                
How do you access the land at this time?<br><input style="height:20px;font-size:12pt; name="howaccess" type="text" id="howaccess" form="landform" size="50">
</div>

如果这是我没有看到的愚蠢的东西，我道歉。还要注意，显示的问题可能包括文本框或其他表单字段类型，但现在我只放置简单的短输入字段。

谢谢你。

Answer 1

您的代码有一些问题。下面是正在运行的代码:

function landaccessfunction(){
getValue = document.getElementById("access").value;
if(getValue == "road"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "easement"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "none";
}
if(getValue == "noaccess"){
document.getElementById("roaddetails").style.display = "none";
document.getElementById("easementdetails").style.display = "none";
document.getElementById("noaccessdetails").style.display = "block";
}
if(getValue == "selectaccess"){
document.getElementById("roaddetails").style.display = "block";
document.getElementById("easementdetails").style.display = "block";
document.getElementById("noaccessdetails").style.display = "block";
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
How is the land accessed?
<select style="height:24px;font-size:12pt;" name="access" 
id="access" 
onChange="landaccessfunction()" 
class="form-control" 
form="landform">
<option value="selectaccess">Select One</option>
<option value="road">Direct road access</option>
<option value="easement">A legally deeded easement</option>
<option value="noaccess">No legal access</option>
</select>

<div class="text" id="roaddetails" style="display:none;">
Who owns the road?<br><input style="height:20px;font-size:12pt;" name="roadowner" type="text" id="roadowner" form="landform" size="50">
</div>
<div class="text" id="easementdetails" style="display:none;">
Describe easement<br><input style="height:20px;font-size:12pt;" name="easedescr" type="text" id="easedescr" form="landform" size="50">
</div>
<div class="text" id="noaccessdetails" style="display:none;">
How do you access the land at this time?<br><input style="height:20px;font-size:12pt;" name="howaccess" type="text" id="howaccess" form="landform" size="50">
</div>