如何为jQuery执行切换案例？

我有一个if-else语句，它给了我奇怪的回答。。。每当我先选择“输出”时，之后选择的任何内容都不会出现。。。 仅供参考，我正在使用multi-select，因此我可以选择并显示任意数量的内容

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

选择类别
手臂
区域输入
输出
柜台
旗帜
传感器
单位
武装状态
请输入输出编号并按“添加”按钮：

请输入区域编号并按“添加”按钮：

请输入计数器编号并按“添加”按钮：

请输入标志号并按“添加”按钮：

请输入传感器编号并按“添加”按钮：

这只是标准的javascript：

---

其中switch变量将是所选标记的名称

没有JQuery switch语句。如果您想使用switch语句，可以参考Javascript switch

这就是我的方法。我将为#select-choice-1中的每个选项添加一个data section属性，该属性将具有相应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();
  
    }

---

在这种情况下，您不需要switch语句，您可以使用所选选项的当前值或id来选择目标元素：

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

更新： 当您对select元素使用multiple属性时，您可以使用jQuery

val

方法，它返回所选选项的数组，然后您可以基于所选值创建选择器

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

---

如果是多选，则不要使用

else（如果

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

演示：

如果可以对标记进行一些更改，可以将其简化为如下内容

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

选择类别
手臂
区域输入
输出
柜台
旗帜
传感器
单位
武装状态
请输入输出编号并按“添加”按钮：

请输入区域编号并按“添加”按钮：

请输入计数器编号并按“添加”按钮：

请输入标志号并按“添加”按钮：

请输入传感器编号并按“添加”按钮：

---

演示：

上面的if..else if..else有什么问题？@SJnawali这是一个多选，如果我先选择“output”，之后选择的其他选项将不会出现。@ArunPJohny是的，但更改ID不是很难。对不起，我刚才详细阐述了我的问题（我使用的是多选）。您的代码可以工作，但当我取消选择它并选择另一个选项时，它不会隐藏或更改为另一个选项。它现在可以工作了（尽管对我来说理解起来似乎很复杂）：D耶！谢谢但是'div.right>div'是什么意思？@yvonnezoe不客气，这是一个直接子选择器，选择

div

s的直接子div元素，类为

right

@yvonnezoe是的，你的意思是JavaScript而不是Java:），当然，

join

会在数组长度超过1时加入数组的元素，因此，如果用户选择一个选项，该选项与

'Text'

连接，否则它将

与
'Text，#'
连接，然后与
'Text'
连接，您可以对
控制台.log（选择器）
进行编码，它向您展示了选择器是如何创建的。啊，是的，这是我程序的一部分，我在上面的问题中没有包括。但问题是，如果先选择“输出”，其他输出将不会显示：（@yvonnezoe）你能分享一下html吗also@yvonnezoe我试过undefined的答案，但对我的朋友不起作用case@yvonnezoe共享html alsothanks…我应该如何将“1”表示为我的jquery select语句？并且可以通过省略break；（s）来添加多个case选项。噢，谢谢！也许你也可以帮我解决这个问题
$('#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();
    }
});

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

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