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

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>

所选选项的硬编码视图：

<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>

Answer 2

为简化代码，请尝试修改您的 HTML 并使 <option> 的值等于您希望使其可见的 id 或 <div>。

$("div.result").hide();
$("select#AgencyDetails").change(function(){
  var selectedVal = $(this).val();
  $("div.result").hide();
  $("div#"+selectedVal).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="bigfield">
  <select name ="Agency" id="AgencyDetails" ">
     <option value ="0" selected = "selected">Select Agency..</option>
     <option value ="Agency1"> Name1</option>
     <option value ="Agency2"> Name2</option>
     <option value ="Agency3"> Name3</option>
     <option value = "Others"> Others</option>
  </select>
</li>
</ul>
<div class="result" id = "Agency1" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent1" type="text" name="agentName" id="agentName" disabled="disabled"/></li>
</div>
                                                                                   
<div  class="result" id = "Agency2" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent2" type="text" name="agentName" id="agentName" disabled="disabled"/></li>                                                         </div>
                                                                                   <div  class="result" id = "Agency3" style ="display:none;">
     <li class ="bigfield"><input placeholder="Agent3" type="text" name="agentName" id="agentName" disabled="disabled"/></li>
</div>

Answer 3

使用 jQuery eq() 和 selectedIndex：

var details;
var agencyChanged = function(e) {
  details.hide();
  var i = this.selectedIndex;
  if (0 === i) return;
  var toShow = details.eq(i)
  if (!toShow.length)
    toShow = details.eq(0);
  toShow.show();
};
$(function() {
  details = $('div.details');
  $('#AgencyDetails').on('change keyup', agencyChanged).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="Agency" id="AgencyDetails">
  <option value="0">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="AddDiv" class='details'>
  <li class="bigfield">
    <input placeholder="AddDiv" type="text" name="agentName" />
  </li>
</div>
<div id="Name1" class='details'>
  <li class="bigfield">
    <input placeholder="Name1" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name2" class='details'>
  <li class="bigfield">
    <input placeholder="Name2" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name3" class='details'>
  <li class="bigfield">
    <input placeholder="Name3" type="text" name="agentName" disabled="disabled" />
  </li>
</div>

带有data属性：

var details;
var agencyChanged = function(e) {
  details.hide();
  var id = $(this).find(':selected').data('id');
  if (id) $('#' + id).show();
};
$(function() {
  details = $('div.details');
  $('#AgencyDetails').on('change keyup', agencyChanged).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="Agency" id="AgencyDetails">
  <option value="0">Select Agency..</option>
  <option value="Name 1" data-id="Name1">Name1</option>
  <option value="Name 2" data-id="Name2">Name2</option>
  <option value="Name 3" data-id="Name3">Name3</option>
  <option value="Others" data-id="AddDiv">Others</option>
</select>
<div id="AddDiv" class='details'>
  <li class="bigfield">
    <input placeholder="AddDiv" type="text" name="agentName" />
  </li>
</div>
<div id="Name1" class='details'>
  <li class="bigfield">
    <input placeholder="Name1" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name2" class='details'>
  <li class="bigfield">
    <input placeholder="Name2" type="text" name="agentName" disabled="disabled" />
  </li>
</div>
<div id="Name3" class='details'>
  <li class="bigfield">
    <input placeholder="Name3" type="text" name="agentName" disabled="disabled" />
  </li>
</div>