title: How to display selected option from dropdown list
body: <p><strong>Task:</strong></p>
  
  <p>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.</p>
  
  <p><strong>What has been done:</strong>
  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.</p>
  
  <p><strong>Issue:</strong>
  How am I able to allow the conditional statement to read from the dropdown list selected instead of me hardcoding in the value.</p>
  
  <p><strong>Code:</strong></p>
  
  <p>DropDown code:</p>
  
  <pre><code>  &lt;li class="bigfield"&gt;
                      &lt;select name ="Agency" id="AgencyDetails" onchange = "return val(this.value);"&gt;
                      &lt;option value ="0" selected = "selected"&gt; Select Agency..&lt;/option&gt;
                      &lt;option value ="Name 1"&gt; Name1&lt;/option&gt;
                      &lt;option value ="Name 2"&gt; Name2&lt;/option&gt;
                      &lt;option value ="Name 3"&gt; Name3&lt;/option&gt;
                      &lt;option value = "Others"&gt; Others&lt;/option&gt;
              &lt;/li&gt;
  </code></pre>
  
  <p>Conditional Statement to see which option has been selected:</p>
  
  <pre><code>&lt;script&gt;
  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";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Hardcoded View of selected option:</p>
  
  <pre><code>&lt;div  id = "Name1" style ="display:none"&gt;
              &lt;li class ="bigfield"&gt;&lt;input placeholder="Agent1" type="text" name="agentName" id="agentName" &lt;?php echo 'value="Agency 1"'?&gt; disabled="disabled"/&gt;&lt;/li&gt;
              &lt;/div&gt;
  .....(identical for Name2 and Name3)
  </code></pre>