javascript - 如何从下拉列表中显示选定的选项

Question

任务:

创建一个下拉列表，其中包含供用户选择的选项。当用户从下拉列表中选择一个选项时。将自动出现一个附加字段以显示用户选择的选项。

已完成的工作:下拉列表已经创建，它显示了供用户选择的选项列表。我还设法在作为条件语句的一部分选择的选项中显示通过硬编码选择的选项。

问题:我如何才能允许条件语句从选定的下拉列表中读取而不是在值中进行硬编码。

代码:

下拉代码:

  <li class="bigfield">
                    <select name ="Agency" id="AgencyDetails" onchange = "return val(this.value);">
                    <option value ="0" selected = "selected"> Select Agency..</option>
                    <option value ="Name 1"> Name1</option>
                    <option value ="Name 2"> Name2</option>
                    <option value ="Name 3"> Name3</option>
                    <option value = "Others"> Others</option>
            </li>

查看选择了哪个选项的条件语句:

<script>
function val(x) {
    document.getElementById("AddDiv").style.display = x == "Others" ? "block" : "none";
    document.getElementById("Name1").style.display = x == "Name 1" ? "block" : "none";
    document.getElementById("Name2").style.display = x == "Name 2" ? "block" : "none";
    document.getElementById("Name3").style.display = x == "Name 3" ? "block" : "none";
}
</script>

所选选项的硬编码 View :

<div  id = "Name1" style ="display:none">
            <li class ="bigfield"><input placeholder="Agent1" type="text" name="agentName" id="agentName" <?php echo 'value="Agency 1"'?> disabled="disabled"/></li>
            </div>
.....(identical for Name2 and Name3)

Answer 1

使用 jQuery，这非常简单。

$('#AgencyDetails').on('change',function(){
    $('#result').html($(this).val());   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name ="Agency" id="AgencyDetails">
   <option value ="0" selected = "selected"> Select Agency..</option>
   <option value ="Name 1"> Name1</option>
   <option value ="Name 2"> Name2</option>
   <option value ="Name 3"> Name3</option>
   <option value = "Others"> Others</option>
 </select>
<div id="result"></div>

上面的代码将被放在一个$(document).ready(..) 中像这样:

<script>
    $(function(){
       // above code here
    });
</script>