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

Question

Task:

Create a dropdown list with options for user to select. When user select an option from the dropdown list. An additional field will automatically appear to display the option selected by the user.

What has been done: The dropdown list has already been created and it is showing the list of options for user to select. I have also managed to display the option selected by hardcoding in the option selected as part of a conditional statement.

Issue: How am I able to allow the conditional statement to read from the dropdown list selected instead of me hardcoding in the value.

Code:

DropDown code:

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

Conditional Statement to see which option has been selected:

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

Hardcoded View of selected option:

<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

Using jQuery, this is about as easy as it gets.

 $('#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> 

The above code would be put inside a $(document).ready(..) like so:

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

Answer 2

For code simplicity try modifying your HTML and make <option> value equal to id of <div> which you want to make visible.

 $("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

With jQuery eq() and 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> 

With data attribute:

 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>