显示/隐藏 div 选择多个答案

【问题标题】：Show/hide div select multiple显示/隐藏 div 选择多个
【发布时间】：2014-11-18 23:51:38
【问题描述】：

我有以下代码：http://jsfiddle.net/tucuta/pvvmvdpg/

$("#mySelect").change(function(){
  $("#div1").fadeIn("fast")[ ($(this).val() == 'value1') ? 'show' : 'hide' ]();
  $("#div2").fadeIn("fast")[ ($(this).val() == 'value2') ? 'show' : 'hide' ]();
});

$("#mySelect").change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelect" multiple="multiple">
  <option value="value1">First</option>
  <option value="value2">Second</option>
  <option value="value3">Third</option>
  <option value="value4">Fourth</option>
</select>

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

如果是普通选择，代码可以正常工作，但如果是多选，则无法正常工作。

例如，如果我选择首先显示 div 1，但如果我先选择然后选择第二个，则它既不显示 div1 也不显示 div2。

有人请帮助我，我提前谢谢你

【问题讨论】：

.val() 多选返回一个数组。碰巧["value1"] == "value1" 在 javascript 中返回 true。
您好，感谢您的及时回复。我问，应该这样做，请举个例子......提前谢谢

标签： jquery select hide show show-hide

【解决方案1】：

检查您要查找的值是否在列表中任何地方，通过$.inArray()

$("#mySelect").change(function(){
  $("#div1").fadeIn("fast")[ $.inArray('value1', $(this).val()) >= 0 ? 'show' : 'hide' ]();
  $("#div2").fadeIn("fast")[ $.inArray('value2', $(this).val()) >= 0 ? 'show' : 'hide' ]();
});

$("#mySelect").change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelect" multiple="multiple">
  <option value="value1">First</option>
  <option value="value2">Second</option>
  <option value="value3">Third</option>
  <option value="value4">Fourth</option>
</select>

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

【讨论】：

非常感谢你。这正是我想要做的，感谢您的帮助并将问题解决。
@Paul Roub 如果我想在页面使用时默认显示第一个 div，然后在 div 之间切换

【解决方案2】：

删除这一行

$("#mySelect").change();

它会起作用的因为你已经在 '#myselect' 上使用了 change 事件，它会自动触发，你不必调用它。

【讨论】：

【解决方案3】：

使用

$.inArray(value, array) // Return the index in array or -1 if not exists
if( $.inArray('value1', $(this).val()) != -1 ) { ... }

【讨论】：

【解决方案4】：

我添加了几行。它的工作 Code fiddle

HTML

<select id="mySelect" multiple="multiple">
  <option value="value1">First</option>
  <option value="value2">Second</option>
  <option value="value3">Third</option>
  <option value="value4">Fourth</option>
</select>
<div id="div1" class="a">Div 1</div>
<div id="div2" class="a">Div 2</div>
<div id="div3" class="a">Div 3</div>
<div id="div4" class="a">Div 4</div>

脚本

$(document).ready(function() {
    $("#mySelect").change(function(){
        $(".a").hide();                              
        if( $(this).val()){
            for(var i=0; i < $(this).val().length; i++){
                if($(this).val()[i] == "value1"){
                        $("#div1").fadeIn("fast")['show']();
                }
                else if($(this).val()[i] == "value2"){
                        $("#div2").fadeIn("fast")['show']();
                }
                 else if($(this).val()[i] == "value3"){
                        $("#div3").fadeIn("fast")['show']();
                }
                 else if($(this).val()[i] == "value4"){
                        $("#div4").fadeIn("fast")['show']();
                }
            }
        }
    });
    $("#mySelect").change();
});

【讨论】：

【解决方案5】：

一个可能的解决方案可能是这个：

HTML：

<select id="mySelect" multiple="multiple">
  <option value="value1">First</option>
  <option value="value2">Second</option>
  <option value="value3">Third</option>
  <option value="value4">Fourth</option>
</select>
<div id="div1" match="value1">Div 1</div>
<div id="div2" match="value2">Div 2</div>
<div id="div3" match="value3">Div 3</div>
<div id="div4" match="value4">Div 4</div>

CSS：

div{
    display:none;
}

jQuery：

$(document).ready(function() {
    function exists(elemt,arr){
        return (jQuery.inArray(elemt,arr) > -1);
    }

    $('#mySelect').change(function(){
        var $selected = $(this).val();
        $('div').each(function(){
                $(this).fadeIn('fast')[ 
                    (exists($(this).attr('match'),$selected)) ? 'show' : 'hide' ]();      
        });
    });
});

查看此链接jsfiddle 以查看工作示例。

希望有用！

【讨论】：