How do I do a switch case for jQuery?

if-statement, jquery, switch-statement

Solution

That`s just standard javascript : http://www.w3schools.com/js/js_switch.asp

switch(n) {
 case 1:
  //execute code block 1
  break;
 case 2:
  //execute code block 2
  break;
 default:
 // code to be executed if n is different from case 1 and 2
}

where switch variable will be the name of selected tag

Problem

I have this if-else statement which gave me weird response... whenever i select "output" first, nothing else selected afterwards can appear... FYI, I am using multi select so I can select and show as many as I want. ``` $('#outputText').hide(); $('#armCB').hide(); $('#outputCB').hide(); $('#zoneText').hide(); $('#counterText').hide(); $('#flagText').hide(); $('#sensorText').hide(); ('#select-choice-1').change(function(){ if ($('#output').is(':selected')){ $('#outputText').show(); } else if ($('#arm').is(':selected')){ $('#armCB').show(); } else if ($('#zone').is(':selected')){ $('#zoneText').show(); } else if ($('#counter').is(':selected')){ $('#counterText').show(); } else if ($('#flag').is(':selected')){ $('#flagText').show(); } else if ($('#sensor').is(':selected')){ $('#sensorText').show(); } else{ $('#outputText').hide(); $('#armCB').hide(); $('#zoneText').hide(); $('#counterText').hide(); $('#flagText').hide(); $('#sensorText').hide(); } ``` Is there a mistake in my if-else statement? or must I use Switch case statement here? If so, how should i do it? HTML: ``` <div id="display" style=" clear:both"> <div class="left" style="float:left; width:48%"> <div data-role="fieldcontain"> <label for="select-choice-1" class="select">Select Category</label> <select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-mini="true" multiple="multiple" size="2"> <option value="arm" id="arm">Arm</option> <option value="zone" id="zone">Zone Input</option> <option value="output" id="output">Output</option> <option value="counter" id="counter">Counter</option> <option value="flag" id="flag">Flag</option> <option value="sensor" id="sensor">Sensor</option> </select> </div> </div> <div class="right" style=" float: right; width:48%"> <div id="armCB"> <fieldset data-role="controlgroup"> <legend>Unit</legend> <input type="checkbox" class="CB" name="armCB_1" id="armCB_1" class="custom" data-mini="true" /> <label for="armCB_1">Arming Status</label> </fieldset> </div> <div id="outputText"> <p> Please enter an Output number and press "Add" button: </p> <input style="background: white; color: black;" type="text" id="outputTextInput" value=""> <input type="submit" id="outputAdd" value="Add"/> <input type="submit" id="outputRemove" value="Remove"/> </div> <div id="zoneText"> <p> Please enter a Zone number and press "Add" button: </p> <input style="background: white; color: black;" type="text" id="zoneTextInput" value=""> <input type="submit" id="zoneAdd" value="Add"/> <input type="submit" id="zoneRemove" value="Remove"/> </div> <div id="counterText"> <p> Please enter a counter number and press "Add" button: </p> <input style="background: white; color: black;" type="text" id="counterTextInput" value=""> <input type="submit" id="counterAdd" value="Add"/> <input type="submit" id="counterRemove" value="Remove"/> </div> <div id="flagText"> <p> Please enter a Flag number and press "Add" button: </p> <input style="background: white; color: black;" type="text" id="flagTextInput" value=""> <input type="submit" id="flagAdd" value="Add"/> <input type="submit" id="flagRemove" value="Remove"/> </div> <div id="sensorText"> <p> Please enter a Sensor number and press "Add" button: </p> <input style="background: white; color: black;" type="text" id="sensorTextInput" value=""> <input type="submit" id="sensorAdd" value="Add"/> <input type="submit" id="sensorRemove" value="Remove"/> </div> </div> </div> ```

Original source