JQuerySelect字段结果组合，显示某些class或id？

Question

我有三个不同的 select 元素。

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

我现在想要实现的是检查每个 select 元素（或每个 selectID）的当前 selection，然后显示特定的 #ID 或 .class，取决于 select离子。

我做了一些快速而肮脏的工作，但有一个大问题：它只是独立检查每个 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');
        }  
})

现在效果很好，但是如果我从第一个 select 元素 select "Category 1-1" 并且同时从第三个元素 "Category 3-1" 怎么办？

现在它会显示 "Category-1-1" AND "Category-3-1"。但这不是我想要的。我希望脚本显示#ID“#1-1-and-3-1”。

我怎样才能做到这一点？

问候和感谢，丹尼尔

Answer 1

您可以显示与所选值 option 具有相同 class 的 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>

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

JQuerySelect字段结果组合，显示某些class或id？

JQuery Select field result combination, display certain class or id?

jquery

select

element