根據多選選擇顯示/隱藏下拉菜單

Question

我有以下HTML。

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

基本上基於多選中選擇的值來顯示/隱藏下拉菜單。

提前致謝。

約翰

Answer 1

請注意，來自多個選擇的值存儲在數組內。

$(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/

Answer 2

@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