Dynamic Toggle of dropdown and textbox

by SamirBehara

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="switch">
<option value="unknown">Select Option...</option>
<option value="invNumber">Invoice Number </option>
<option value="subCode">Subscriber Code </option>
</select>

<br><br>

<span id="invNumber-input" style="display:none"><input type="text" id="name"></span>
<span id="subCode-dropdown" style="display:none">
<select id="subCode">
<option>Select SubCode</option>
<option>AA</option>
<option>BB</option>
<option>CC</option>
</select></span>

JavaScript

$("#switch").change(function () {
  switch($("#switch").val()) {
    case "invNumber":
      $("#invNumber-input").css("display", "inline")
      $("#subCode-dropdown").css("display", "none")
      break
    case "subCode":
      $("#invNumber-input").css("display", "none")
      $("#subCode-dropdown").css("display", "inline")
      break
    default:
      $("#subCode-dropdown").css("display", "none")
      $("#invNumber-input").css("display", "none")
  }
})