Search code examples
javascripthtmldrop-down-menutextboxdropdownlistfor

When a Specific DropDownList Item Is Selected


So the issue i am having is that depending on the specific injury that is selected from the drop down list ex: thigh, arm, head, heart, fingers. Certain text boxes will be read only. ex: if you select you pinky finger all text boxes will be read only except the digits text box. if shoulder is selected all text boxes will be read only except UE. and if thigh or knee is select then all text boxes will be read only except the LE text box.**

<select onchange="jsFunction()">
  <option>Foot</option>
  <option>Shoudler</option>
  <option>Thumb</option>
</select>
<input id="UE" type="text">
<input id="LE" type="text">
<input id="Digits" type="text">


Solution

  • You can put number values in your options which then passes the value to the jsFunction. Inside your jsFunction you have switch statement that makes the input boxes readOnly and other inputs to accept user values.

    <select onchange="jsFunction(this)">
      <option value="1">Foot</option>
      <option value="2">Shoudler</option>
      <option value="3">Thumb</option>
    </select>
    <input id="UE" type="text">
    <input id="LE" type="text">
    <input id="Digits" type="text">
    
    <script type="text/javascript">
      function jsFunction(sel){
      		var expression = sel.value;
      		
    		switch(expression) {
    		    case "1":
    		        document.getElementById("UE").readOnly = true;
    		        document.getElementById("LE").readOnly = true;
    		        document.getElementById("Digits").readOnly = false;
    		        break;
    		    case "2":
    		        document.getElementById("LE").readOnly = true;
    		        document.getElementById("Digits").readOnly = true;
    		        document.getElementById("UE").readOnly = false;
    		        break;
    		    case "3":
    		        document.getElementById("Digits").readOnly = true;
    		        document.getElementById("UE").readOnly = true;
    		        document.getElementById("LE").readOnly = false;
    		        break;			        
    		    default:
    		        //do nothing
    		} 
      }
    </script>