Daniel Daniel - 6 months ago 15
Javascript Question

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

i have three different select elements.

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


What I now want to achieve is to check the current selection from each select element (or each selectID) and then display a specific #ID or .class, dependend on the selection.

I ve done some quick and dirty work, but there is one huge problem: it just checks each select element independently.

Here is the copy & paste code:

$("#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');
}
})


Now that works perfectly, but what if i select "Category 1-1" from the first select element, and on the same time "Category 3-1" from the third one?

Right now it would display "Category-1-1" AND "Category-3-1". But thats not what I want. I would like then the script to display an #ID "#1-1-and-3-1".

How could i achieve that?

Regards and Thanks,
Daniel

Answer

You can show divs which have same class as value of selected option and hide other divs with that category using map().

$('.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>