Question

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

我可以进入跑步，但我的问题是，一个div可以被许多OPTIONS隐藏/显示。因此，使用我的代码，这些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以显示或隐藏每个元素使用给定的选项。

Answer 2

您的问题不明确，但可以通过添加和删除隐藏类并显示div来获得可能的解决方案。

Answer 3

只需设置jQuery对象数组。然后，当用户更改所选选项时，只需要一个case，然后循环你要隐藏的jQuery对象的数组，并简单地隐藏它们。

你可以轻松地使这比我生成的伪代码更好，但我希望如果我理解你的问题，这有助于回答你的问题。

Answer 4

你可以试试这个：

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

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


function getval() {

    var divs = document.getElementsByTagName("div");

for(var i=0; i<divs.length; i++){
    $("#div"+i).hide("50");
    $("#div"+i+1).show("50");//any other way to identify ur identity of div and u are done
}

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

让我知道它是否已经解决。

jQuery：在选择更改时隐藏/显示多个div

4 个答案:

HTML：

的JavaScript：