根據Multiselect選項顯示/隱藏下拉列表

我有以下HTML。根據Multiselect選項顯示/隱藏下拉列表

<select id="segment_c" name="segment_c[]" multiple="true" size="6" style="width:150" title="" tabindex="0"> 
<option label="" value="" selected="selected"></option> 
<option label="Mobile1" value="Mobile1">Mobile1</option> 
<option label="Mobile2" value="Mobile2">Mobile2</option> 
<option label="Mobile3" value="Mobile3">Mobile3</option> 
</select> 


<select name="Mobile1_c" id="Mobile1_c" title=""> 
<option label="" value=""></option> 
<option label="Samsung" value="Samsung">Samsung</option> 
<option label="Nokia" value="Nokia">Nokia</option> 
</select> 

<select name="Mobile2_c" id="Mobile2_c" title=""> 
<option label="" value="" selected="selected"></option> 
<option label="Samsung" value="Samsung">Samsung</option> 
<option label="Nokia" value="Nokia">Nokia</option> 
</select> 

<select name="Mobile3_c" id="Mobile3_c" title=""> 
<option label="" value=""></option> 
<option label="Motorola" value="Motorola">Motorola</option> 
<option label="Nokia" value="Nokia">Nokia</option> 
</select>

這是一個多選列表

我需要幫助jQuery的下面。

我想迭代multiselect (id="segment_c")使得如果value="Mobile1"和value="Mobile2"和value="Mobile3"是選擇然後顯示下拉與id="Mobile1_c"和id="Mobile2_c"和id="Mobile3"

基本上示出了基於在選擇的值/隱藏下拉多選。

在此先感謝。

約翰

來源

2014-04-03 John Dcruz

你有沒有嘗試什麼嗎？我看到你可以想象算法。 –

注意，從多個選擇存儲陣列內的值。

$(document).ready(function() { 
    function hideAll() { 
     $('#Mobile1_c,#Mobile2_c, #Mobile3_c').hide(); 
    } 
    hideAll(); 

    $('#segment_c').change(function() { 
     hideAll(); 
     var val = $(this).val(); 
     if (val == "") { 
      hideAll(); 
     } else { 
      for (var i = 0; i <= val.length; i++) { 
       $('select[name*="' + val[i] + '"]').show(); 
      } 
     } 
    }); 

});

http://jsfiddle.net/4nuAW/2/

來源

2014-04-03 18:02:02

@Freak_Droid幾乎有它，但我不能評論缺乏代表。

與實施你並不需要所有的三個選擇的要求

$('#Mobile1_c,#Mobile2_c, #Mobile3_c').toggle(); 

$('#segment_c').change(function(){ 
    //val returns an array not a jquery object so dont prefix with a $ 
    var val = $(this).val(); 

    //you may want a more robust check here 
    if(val.length === 3){ 
     $('#Mobile3_c').show(); 
    }else{ 
     $('#Mobile3_c').hide();  
    } 
});

http://jsfiddle.net/VuN78/1

來源

2014-04-03 17:23:36

根據Multiselect選項顯示/隱藏下拉列表

回答

相關問題