javascript - 如何显示选择列表中的字段

Question

我采用了一种非常漫长且乏味的方式来显示选择列表中每个选项的详细信息。我确实明白这不应该是想象中必须做的数百个选项的方式。这简直是​​不切实际而且愚蠢至极。

但是，此时我只是测试逻辑，尚未将任何数据实现到数据库中，因此我不打算使用“Select”语句从数据库中提取数据。因此，我正在寻找一个替代的java脚本来读取将显示详细信息的额外div

代码:

选择列表:

<li class="bigfield">
    <select name =".." id=".." onchange = "return val(this.value);">
        <option value ="0" selected = "selected"> .. </option>
        <option value =".."> .. </option>
        <option value =".."> .. </option>
        <option value = "Others"> Others</option>
    </select>
</li>

检查已选择哪个选项的条件:

<script>
function val(x) {
    document.getElementById("extradiv").style.display = x == "Others" ? "block" : "none";
    document.getElementById("..").style.display = x == ".." ? "block" : "none";
}
</script>

这是一个又长又不切实际的“额外 div block ”，当我选择 Agency1、2 或 3 时，它会显示各个不同的字段。

<div id = "Agency1" style ="display:none">

      ...
</div>

因此，我如何能够将这 3 个不同的选项字段简化为 1，以便在我的 error_log 中，当我选择代理 1 时，将值 POST 到 Controller 时:它仍然会显示与代理 1 关联的信息如果我选择代理机构 2，则显示与代理机构 2 等相关的信息？

Answer 1

代码，选择列表，

<li class="bigfield">
    <select name ="AgencyDetails" id="AgencyDetails" onchange = "val(this.value);">
        <option value ="0" selected = "selected"> Select Agency..</option>
        <option value ="Agency_1"> Agency1</option>
        <option value ="Agency_2"> Agency2</option>
        <option value ="Agency_3"> Agency3</option>
        <option value = "Others"> Others</option>
    </select>
</li>

额外的div，

<div id = "Agency_1" style ="display:none">
    <li class="bigfield"><input value="Agency Name A" type="text" name="agency1Name" id="agency1Name" readonly/></li>
    <li class="bigfield"><input value="Agency Registration Num A" type="text" name="agent1RegistrationNum" id="agent1RegistrationNum" readonly/></li>
    <li class="bigfield"><input value="Agency Address A" type="text" name="agent1Address" id="agent1Address" readonly/></li>
</div>

<div id = "Agency_2" style ="display:none" >
        <li class="bigfield"><input value="Agency Name 2" type="text" name="agency2Name" id="agency2Name" readonly/></li>
        <li class="bigfield"><input value="Agency Registration Num 2" type="text" name="agent2RegistrationNum" id="agent2RegistrationNum" readonly/></li>
        <li class="bigfield"><input value="Agency Address 2" type="text" name="agent2Address" id="agent2Address" readonly/></li>
    </div>


<div id = "Agency_3" style ="display:none">
    <li class="bigfield"><input value="Agency Name 3" type="text" name="agency3Name" id="agency3Name" readonly/></li>
    <li class="bigfield"><input value="Agency Registration Num 3" type="text" name="agent3RegistrationNum" id="agent3RegistrationNum" readonly/></li>
    <li class="bigfield"><input value="Agency Address 3" type="text" name="agentAddress" id="agentAddress" readonly/></li>
</div>

Jquery函数:

<script>
function val(x) {
 if(x != "Others" && x != 0){
   $("#"+x).show();
}else{
   $("#extradiv").hide();
}
</script>