Wie mache ich einen Switch-Fall für jQuery?

Question

Ich habe diese if-else-Anweisung, die mir eine seltsame Antwort gab ... wenn ich zuerst "output" wähle, kann nichts anderes später erscheinen ... FYI, ich benutze multi select, damit ich so viele auswählen und anzeigen kann wie ich will.

$('#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(); 

     } 

Gibt es einen Fehler in meiner If-else-Anweisung? oder muss ich Switch case statement hier verwenden? Wenn ja, wie soll ich es tun?

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> 

Answer 1

Hier geht nur 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 
}       

wo Schalter Variable der Name des ausgewählten Tag sein wird

Answer 2

Es gibt keine JQuery Schalter Erklärung. Wenn Sie die switch-Anweisung verwenden möchten, können Sie sich auf Javascript Switch beziehen.

Switch

Hier wäre mein Ansatz. Ich werde für jede Option in # select-choice-1 ein Data-Section-Attribut hinzufügen, das die ID des entsprechenden div hat.

$('#select-choice-1').change(function(){ 
          $('#outputText').hide(); 
        $('#armCB').hide(); 
        $('#zoneText').hide(); 
        $('#counterText').hide(); 
        $('#flagText').hide(); 
        $('#sensorText').hide(); 

    //the above hide() methods can be removed if you can 
    //add a class for all of these sections and say $('.sectionDivs').hide() 
    var divId = $(':selected',this).data('section'); 
    $('#' + divId).show(); 
  
    } 

Answer 3

Sie haben nicht eine switch-Anweisung in diesem Fall benötigen, können Sie den aktuellen Wert oder die ID der gewählten Option verwenden, um das Zielelement zur Auswahl:

$('#select-choice-1').change(function(){ 
    $('.elements').hide(); 
    $('#' + this.value + 'Text').show(); 
}); 

Update: Wie Sie verwenden mehrere Attribute für das Element select. Sie können die Methode jQuery val verwenden, es wird ein Array ausgewählter Optionen zurückgegeben, und Sie können einen Selektor basierend auf den ausgewählten Werten erstellen.

$('#select-choice-1').change(function(){ 
    $('div.right > div').hide(); 
    var selector = '#' + $(this).val().join('Text, #') + 'Text'; 
    $(selector).show(); 
}); 

http://jsfiddle.net/3AbJq/

Answer 4

Wenn es ein Multi wählen ist, verwenden Sie nicht else if

$('#select-choice-1').change(function() { 
    $('#outputText').hide(); 
    $('#armCB').hide(); 
    $('#zoneText').hide(); 
    $('#counterText').hide(); 
    $('#flagText').hide(); 
    $('#sensorText').hide(); 

    if ($('#output').is(':selected')) { 
     $('#outputText').show(); 
    } 
    if ($('#arm').is(':selected')) { 
     $('#armCB').show(); 
    } 
    if ($('#zone').is(':selected')) { 
     $('#zoneText').show(); 
    } 
    if ($('#counter').is(':selected')) { 
     $('#counterText').show(); 
    } 
    if ($('#flag').is(':selected')) { 
     $('#flagText').show(); 
    } 
    if ($('#sensor').is(':selected')) { 
     $('#sensorText').show(); 
    } 
}); 

Demo: Fiddle

Sie können es wie unten, um etwas zu vereinfachen, wenn Sie können Nehmen Sie einige Änderungen am Markup vor.

$(function(){ 

    var $ctitems = $('#select-choice-1-items'); 
    var $items = $('.item', $ctitems).hide(); 

    $('#select-choice-1').change(function(){ 
     $items.hide() 
     $('option:selected',this).each(function(){ 
      var id = $(this).attr('id'); 
      $('#' + id + 'Item').show() 
     }); 
    }); 
}); 

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 id="select-choice-1-items" class="right" style=" float: right; width:48%"> 
     <div id="armItem" class="item"> 
      <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="outputItem" class="item"> 
      <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="zoneItem" class="item"> 
      <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="counterItem" class="item"> 
      <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="flagItem" class="item"> 
      <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="sensorItem" class="item"> 
      <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> 

Demo: Fiddle