Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果是正常选择，代码可以正常工作，但如果是多选则不能正常工作。

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

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

Answer 1

通过$.inArray()

检查列表中您要查找的值

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需删除此行

即可

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

它会起作用因为你在＆＃39; #myselect＆＃39;上使用了变更事件。并且它会自动触发，你不必调用它。

Answer 3

使用

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

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

<强> SCRIPT

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

Answer 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查看一个有效的示例。

希望它有用！

显示/隐藏div选择多个

5 个答案: