Показать/скрыть DIV выбрать несколько

Question

У меня есть следующий код: 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.

Кто-то пожалуйста, помогите мне, я заранее благодарю

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

Answer 2

Просто удалите эту строку

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

и он будет работать , потому что вы использовали событие изменения на «#myselect», и он будет стрелять автоматически, вам не нужно его вызывать.

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, чтобы увидеть рабочий пример.

Надеюсь, это полезно!