如何爲jQuery做一個開關盒？

我有這個if-else語句給了我奇怪的迴應......每當我先選擇「輸出」，以後沒有其他選擇可以出現... 僅供參考，我使用多選擇，所以我可以選擇和顯示儘可能多如我所願。如何爲jQuery做一個開關盒？

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

     }

在我的if-else語句中是否有錯誤？或者我必須在這裏使用Switch case語句嗎？如果是這樣，我該怎麼做？

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>

來源

2013-04-22 yvonnezoe

什麼是對上述的if..else的if..else問題？ – 2013-04-22 05:25:42

@SJnawali這是一個多重選擇，如果我先選擇「輸出」，後來選擇的其他人將不會出現。 – yvonnezoe 2013-04-22 06:01:26

That`s只是標準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 
}

其中開關變量將所選擇的標籤的名稱

來源

2013-04-22 05:26:06

謝謝...我應該如何表示「1」作爲我的jquery select語句？ – yvonnezoe 2013-04-22 05:59:57

並且可以通過省略break來添加多個case選項;（s）。 – QMaster 2016-08-25 11:53:11

沒有JQuery的開關聲明。如果你想使用switch語句，你可以參考Javascript Switch。

Switch

這裏將是我的做法。我將爲＃select-choice-1中的每個選項添加一個數據部分屬性，該選項將具有相應div的ID。

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

來源

2013-04-22 05:26:16 PSL

哦謝謝！可能你也可以用這個來幫助我http：// stackoverflow。com/questions/16099958/jquery-javascript-how-to-display-value-get-from -val/16100003？noredirect = 1＃comment22989483_16100003 http://stackoverflow.com/questions/16139196/jquery-assign-和呼叫ID與變量 – yvonnezoe 2013-04-22 06:05:35

你並不需要一個switch語句在這種情況下，您可以使用所選擇的選項的當前值或ID，用於選擇目標元素：

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

更新： 作爲您正在使用select元素的多個屬性，您可以使用jQuery val方法，它返回所選選項的數組，然後您可以根據所選值創建選擇器。

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

http://jsfiddle.net/3AbJq/

來源

2013-04-22 05:28:56 undefined

可能不適用於'armCB' – 2013-04-22 05:36:42

@ArunPJohny是的，但更改ID不是很難。 – undefined 2013-04-22 05:50:38

是的，你是對的 – 2013-04-22 05:57:42

如果是多選，不使用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(); 
    } 
});

演示：Fiddle

你可以，如果你可以把它簡化爲類似下面，對標記進行一些更改

$(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>

演示：Fiddle

來源

2013-04-22 05:35:38

啊是的，那是我的程序的一部分，我沒有包括在我的問題上面。但問題是如果首先選擇「輸出」，其他則不會顯示出來。 :( – yvonnezoe 2013-04-22 05:59:19

@yvonnezoe你可以分享的HTML也 – 2013-04-22 06:15:07

@yvonnezoe也嘗試[undefined的答案]（http://stackoverflow.com/questions/16139948/how-do-i-do-a-switch-case-for-jquery /16140092？noredirect = 1＃answer-16140015） – 2013-04-22 06:15:56

如何爲jQuery做一個開關盒？

回答

相關問題