JQuery選擇字段結果組合，顯示某個類或id？

Question

我有三個不同的選擇元素。

<select id="select1"> 
<option value="">Please make a selection</option> 
<option value=".category-1-1">Category 1-1</option> 
</select> 

<select id="select2"> 
<option value="">Please make a selection</option> 
<option value=".category-2-1">Category 2-1</option> 
<option value=".category-2-2">Category 2-2</option> 
</select> 

<select id="select3"> 
<option value="">Please make a selection</option> 
<option value=".category-3-1">Category 3-1</option> 
<option value=".category-3-2">Category 3-2</option> 
</select> 

我現在要實現的是從每個選擇元素（或每個SELECTID）檢查當前的選擇，然後顯示在選擇特定#ID或的.class，的依賴性。

我做了一些快速和骯髒的工作，但有一個巨大的問題：它只是單獨檢查每個select元素。

這裏是複製&粘貼代碼：

$("#select1").change(function() { 
    var selected_option = $('#select1').val(); 
    if (selected_option === '.category-1-1') { 
     $('#category-2-1, #category-2-2, #category-3-1, #category-3-2').css('display', 'none'); 
     $('#category-1-1').css('display', 'block'); 
     } 
    if (selected_option != '.category-1-1') { 
     $('#category-1-1, #category-2-1, #category-2-2, #category-3-1, #category-3-2').css('display', 'none'); 
     } 
}) 

$("#select2").change(function() { 
    var selected_option = $('#select2').val(); 
    if (selected_option === '.category-2-1') { 
     $('#category-1-1, #category-2-2, #category-3-1, #category-3-2').css('display', 'none'); 
     $('#category-2-1').css('display', 'block'); 
     } 
    if (selected_option === '.category-2-2') { 
     $('#category-1-0, #category-1-1, #category-2-1, #category-3-1, #category-3-2').css('display', 'none'); 
     $('#category-2-2').css('display', 'block'); 
     }  
}) 

$("#select3").change(function() { 
    var selected_option = $('#select3').val(); 
    if (selected_option === '.category-3-1') { 
     $('#category-1-1, #category-2-1, #category-2-2, #category-3-2').css('display', 'none'); 
     $('#category-3-1').css('display', 'block'); 
     } 
    if (selected_option != '.category-3-1') { 
     $('#category-1-1, #category-2-1, #category-2-2, #category-3-2').css('display', 'none'); 
     } 
}) 

現在的作品完美，但如果我從第一個選擇元素「類別1-1」，並在同一時間「類別的3- 1「從第三個？

現在它會顯示「Category-1-1」和「Category-3-1」。但那不是我想要的。我希望腳本顯示一個#ID「＃1-1-和-3-1」。

我怎麼能做到這一點？

的問候和感謝， 丹尼爾

Answer 1

可以顯示具有相同的類與使用map()該類別選擇option並隱藏其他的div值的div。

$('.category').hide(); 
 

 
$('select').change(function() { 
 
    $($(this).val()).show(); 
 

 
    var options = $(this).find('option').not(':selected').map(function() { 
 
    if ($(this).val() != '') return $(this).val(); 
 
    }).get().toString(); 
 

 
    $(options).hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select1"> 
 
    <option value="">Please make a selection</option> 
 
    <option value=".category-1-1">Category 1-1</option> 
 
</select> 
 

 
<select id="select2"> 
 
    <option value="">Please make a selection</option> 
 
    <option value=".category-2-1">Category 2-1</option> 
 
    <option value=".category-2-2">Category 2-2</option> 
 
</select> 
 

 
<select id="select3"> 
 
    <option value="">Please make a selection</option> 
 
    <option value=".category-3-1">Category 3-1</option> 
 
    <option value=".category-3-2">Category 3-2</option> 
 
</select> 
 

 
<div class="category category-1-1">Category 1 1 Element</div> 
 
<div class="category category-2-1">Category 2 1 Element</div> 
 
<div class="category category-2-2">Category 2 2 Element</div> 
 
<div class="category category-3-1">Category 3 1 Element</div> 
 
<div class="category category-3-2">Category 3 2 Element</div>

Answer 2

太感謝你了。

我嘗試了一些「noobish」腳本，但現在它的作品非常完美。

<script> 
$("#select1, #select2, #select3").change(function() { 

var selected_option = $('#select1').val(); 
var selected_option2 = $('#select2').val(); 
var selected_option3 = $('#select3').val(); 

var elems = selected_option+selected_option2+selected_option3; 
var arr = jQuery.makeArray(elems); 
var none = document.getElementsByClassName('mix'); 

$(none).css('display', 'none'); 

$('#'+arr).css('display', 'block');  

}); 
</script> 

：P不是很語義，但我爲一個小白和它的作品，P