javascript - jQuery:在选择更改时隐藏/显示多个 div

Question

在我的表单中，我需要显示/隐藏多个 div，具体取决于选择了 SELECT 中的哪个 OPTION。

我可以开始运行，但我的问题是，一个 div 可以被许多选项隐藏/显示。因此，在我的代码中，这些 div 会显示/隐藏一段时间，然后再次隐藏/显示。

这是我的 HTML:

<select id="vFormat" name="vFormat" onchange="getval(this);">
    <option value="0">Choose</option>
    <option value="1" class="format1">Option 1</option>
    <option value="2" class="format2">Option 2</option>
    <option value="3" class="format3">Option 2</option>
    <option value="4" class="format4">Option 2</option>
    <option value="5" class="format5">Option 2</option>
</select>

<div class="showdivformat1 showdivformat2 hiddenelement">
   Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement">
   Text of visible Div
</div>

这是我的 jQuery

function getval(sel) {

    var divval = $('.selectInput option:selected').attr('class').split(' ');

    for(var i=0; i<divval.length; i++){
        $(".hiddenelement").hide("50");
        $(".showdiv" + divval[i]).show("50");
    }

    for(var i=0; i<divval.length; i++){
        $(".visibleelement").show("50");
        $(".hidediv" + divval[i]).hide("50");
    }       
}

我知道问题是，我总是在更改选项时隐藏 .hiddenelement 并显示 .visibleelement。

但我没有解决方案来检查 div 是否已经隐藏或可见，并且在选项更改后应该保持这样。

Answer 1

这里有一个非常简洁的方法来处理您正在做的事情:

HTML:

<select id="vFormat" name="vFormat">
    <option value="0">Choose</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

<div class="select-default-hidden select-3-shown select-4-shown">
   Shown with options 3 and 4
</div>

<div class="select-default-shown select-4-hidden">
   Shown always, except with option 4
</div>

JavaScript:

$('#vFormat').change(function() {
    $('.select-default-hidden').hide();
    $('.select-default-shown').show();

    $('.select-' + $(this).val() + '-shown').show();
    $('.select-' + $(this).val() + '-hidden').hide();
}).change();

在 JSFiddle 上:https://jsfiddle.net/kd0Lxrgc/1/

使用 select-default-hidden 和 select-default-shown 添加更多元素，以确定它们是应该默认隐藏还是默认显示，然后添加 select-X-shown 和 select-X-hidden 显示或隐藏带有给定选项的每个元素。