我知道這個問題被問了很多次，實際上我從另一篇文章中得到了答案，但是現在我已經撰寫了適合我需要的代碼，當點擊特定的下拉選項時，它根本沒有顯示 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>
然后這是放置在正文標簽和表單本身中的代碼部分：
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>
如果這是我沒有看到的愚蠢的東西，我深表歉意。另請注意，顯示的問題可能包括文本框或其他表單欄位型別，但現在我只放置簡單的簡短輸入欄位。
非常感謝。
uj5u.com熱心網友回復：
您的代碼有一些問題。下面是運行代碼：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/479588.html
標籤：javascript html 形式 显示隐藏 下拉框