Hide/Show Div 代码不适用于下拉框选择

Question

我知道这个问题被问过很多次，我实际上从另一个 post 那里得到了答案，但是现在我已经编写了满足我需要的代码，它没有显示 div单击特定下拉选项时的所有内容。我真的很喜欢这种方法，因为代码对我来说更有意义，但我不确定我做错了什么。我正在设置一个表格，想问几个问题，用户可以在其中选择一个选项，然后下面会显示一个具体问题，询问一个或多个具体问题。我在其他地方使用 Yes/No 单选按钮执行此操作，但我需要使用三个选项执行此操作，这将导致三个单独的查询以获取更多信息，以及另一个选择，他们可以选择将其保留为是而不是回答。

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>

如果我没有看到它是愚蠢的，我深表歉意。另请注意，显示的问题可能包括文本框或其他表单字段类型，但现在我只输入了简单的简短输入字段。

非常感谢。

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>

Hide/Show Div 代码不适用于下拉框选择

Hide/Show Div code not working for dropdown box choices

html

javascript

forms

dropdownbox

show-hide