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。

我做了一些快速而肮脏的工作，但有一个巨大的问题:它只是独立检查每个选择元素。

这是复制和粘贴代码:

$("#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-and-3-1”。

我怎样才能实现这一目标？

问候和感谢，丹尼尔

Answer 1

您可以显示与所选选项的值具有相同类别的div，并使用map()隐藏具有该类别的其他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>