title: How do I do a switch case for jQuery?
body: <p>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.</p>
  
  <pre><code> $('#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();
  
          }
  </code></pre>
  
  <p>Is there a mistake in my if-else statement? or must I use Switch case statement here? If so, how should i do it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="display" style=" clear:both"&gt;
          &lt;div class="left" style="float:left; width:48%"&gt;
          &lt;div data-role="fieldcontain"&gt;
              &lt;label for="select-choice-1" class="select"&gt;Select Category&lt;/label&gt;
              &lt;select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-mini="true" multiple="multiple" size="2"&gt;
  
                  &lt;option value="arm" id="arm"&gt;Arm&lt;/option&gt;
                  &lt;option value="zone" id="zone"&gt;Zone Input&lt;/option&gt;
                  &lt;option value="output" id="output"&gt;Output&lt;/option&gt;
                  &lt;option value="counter" id="counter"&gt;Counter&lt;/option&gt;
                  &lt;option value="flag" id="flag"&gt;Flag&lt;/option&gt;
                  &lt;option value="sensor" id="sensor"&gt;Sensor&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
  
  
  
          &lt;/div&gt;
          &lt;div class="right" style=" float: right; width:48%"&gt;
               &lt;div id="armCB"&gt;
                  &lt;fieldset data-role="controlgroup"&gt;
                      &lt;legend&gt;Unit&lt;/legend&gt;
                      &lt;input type="checkbox" class="CB" name="armCB_1" id="armCB_1" class="custom" data-mini="true" /&gt;
                      &lt;label for="armCB_1"&gt;Arming Status&lt;/label&gt;
                  &lt;/fieldset&gt;
               &lt;/div&gt;
  
              &lt;div id="outputText"&gt;
                  &lt;p&gt; Please enter an Output number and press "Add" button: &lt;/p&gt;
                  &lt;input style="background: white; color: black;" type="text" id="outputTextInput" value=""&gt;
                  &lt;input type="submit" id="outputAdd" value="Add"/&gt;
                  &lt;input type="submit" id="outputRemove" value="Remove"/&gt;
              &lt;/div&gt;
              &lt;div id="zoneText"&gt;
                  &lt;p&gt; Please enter a Zone number and press "Add" button: &lt;/p&gt;
                  &lt;input style="background: white; color: black;" type="text" id="zoneTextInput" value=""&gt;
                  &lt;input type="submit" id="zoneAdd" value="Add"/&gt;
                  &lt;input type="submit" id="zoneRemove" value="Remove"/&gt;
              &lt;/div&gt;
              &lt;div id="counterText"&gt;
                  &lt;p&gt; Please enter a counter number and press "Add" button: &lt;/p&gt;
                  &lt;input style="background: white; color: black;" type="text" id="counterTextInput" value=""&gt;
                  &lt;input type="submit" id="counterAdd" value="Add"/&gt;
                  &lt;input type="submit" id="counterRemove" value="Remove"/&gt;
              &lt;/div&gt;
              &lt;div id="flagText"&gt;
                  &lt;p&gt; Please enter a Flag number and press "Add" button: &lt;/p&gt;
                  &lt;input style="background: white; color: black;" type="text" id="flagTextInput" value=""&gt;
                  &lt;input type="submit" id="flagAdd" value="Add"/&gt;
                  &lt;input type="submit" id="flagRemove" value="Remove"/&gt;
              &lt;/div&gt;
              &lt;div id="sensorText"&gt;
                  &lt;p&gt; Please enter a Sensor number and press "Add" button: &lt;/p&gt;
                  &lt;input style="background: white; color: black;" type="text" id="sensorTextInput" value=""&gt;
                  &lt;input type="submit" id="sensorAdd" value="Add"/&gt;
                  &lt;input type="submit" id="sensorRemove" value="Remove"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>