CODEWITHSUNDEEP
javascriptjqueryhtml
Marina Rose
Marina Rose

Reputation: 65

How can I filter text/divs from two select options?

I am driving myself crazy trying to figure this out...

I would like two drop-down boxes that function to show/hide text as options are clicked on. I got this part down.

https://jsfiddle.net/n1Lcfm36/

$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
    if($(this).attr("value")=="red"){
        $(".box").not(".red").hide();
        $(".red").show();
    }
    else if($(this).attr("value")=="green"){
        $(".box").not(".green").hide();
        $(".green").show();
    }
    else if($(this).attr("value")=="blue"){
        $(".box").not(".blue").hide();
        $(".blue").show();
         }
         else{
             $(".box").hide();
         }
     });
 }).change();
 });

When both boxes are used together, I'd like it to filter similar to how it does here: http://jsfiddle.net/g5cryt31/

$().ready(function() {
    $('.selectSome').on('change', function() {
    showHide();
    });
});

function showHide() {
    // hide all rows
    $('.row').hide();
    // show good row only
    if ($('#select_category').val() != 'null' && $('#select_subject').val() != 'null') {
        $('#row_' + $('#select_subject').val() + '_' +     $('#select_category').val()).show();
    }
}

Except, nothing happens when you try to view one box at a time there. They need to both be used to filter...

So, first box "Class", would show nothing at first. Then, you select a class from the dropdown and related classes appear below.

Second box, "Subject" would show nothing at first. Then, you select a Subject from the dropdown and related subjects appear below.

BUT when both are used together (I guess this would require a submit button?) they filter out similar to the second jsfiddle I posted.

Upvotes: 2

Views: 330

Answers (2)

Cobus Kruger
Cobus Kruger

Reputation: 8605

I would throw out the IDs and just use data attributes. Then dynamically build the selector. Note the different definition on the row divs and the new showHide() function.

$().ready(function() {
  $('.selectSome').on('change', function() {
    showHide();
  });
});

function showHide() {
  // hide all rows
  $('.row').hide();
  // show good rows only
  var cat = $('#select_category').val();
  var sub = $('#select_subject').val();
  var selector = "[class='row']";
  if (cat !== 'null') {
    selector += "[data-category='" + cat + "']";
  }
  if (sub !== 'null') {
    selector += "[data-subject='" + sub + "']";
  }
  $(selector).show();
}
.row {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="select_class">Class:
  <select id="select_category" class="selectSome">
    <option value="null">Please select...</option>
    <option value="c1">Class 1</option>
    <option value="c2">Class 2</option>
    <option value="c3">Class 3</option>
  </select>
</label>
<br/>
<label for="select_subject">Subject:
  <select id="select_subject" class="selectSome">
    <option value="null">Please select...</option>
    <option value="s1">Subject 1</option>
    <option value="s2">Subject 2</option>
    <option value="s3">Subject 3</option>
  </select>
</label>
<hr/>
<div class="row" data-subject="s1" data-category="c1">
  Subject 1 for Class 1
</div>
<div class="row" data-subject="s2" data-category="c1">
  Subject 2 for Class 1
</div>
<div class="row" data-subject="s1" data-category="c2">
  Subject 1 for Class 2
</div>
<div class="row" data-subject="s2" data-category="c2">
  Subject 2 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c2">
  Subject 3 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c3">
  Subject 3 for Class 3
</div>

Upvotes: 0

Ziv Weissman
Ziv Weissman

Reputation: 4526

I think I understand what you want, Correct me if I'm wrong-

This will show all elements regarding class X or Subject Y. If they are picked together it will show only X + Y.

This will do what you what:

$().ready(function() {
    $('.selectSome').on('change', function() {
        showHide();
    });
});

function showHide() {
  // hide all rows
  $('.row').hide();
  // show good row only
  if ($('#select_category').val()!= 'null'){
    //class selected - check if subject seleceted
    if ($('#select_subject').val() != 'null'){
    //class and subject selected use double selector
      $('.' + $('#select_subject').val()+'.'+$('#select_category').val()).show();
    }
    else {
      //only class selected - use category selector    
      $('.' + $('#select_category').val()).show();
    }
  } 
  else
  if ($('#select_subject').val() != 'null'){
    //only subject selected without class
    $('.' + $('#select_subject').val()).show();
  }
}

You will have to add "c1.. s1..." classes (or data-attr) and you can loose the id's

New html for rows:

<div class="row s1 c1">
  Subject 1 for Class 1
</div>
<div class="row s2 c1">
  Subject 2 for Class 1
</div>
<div class="row s1 c2">
  Subject 1 for Class 2
</div>
<div class="row s2 c2">
  Subject 2 for Class 2
</div>
<div class="row s3 c2">
  Subject 3 for Class 2
</div>
<div class="row s3 c3">
  Subject 3 for Class 3
</div>

Fiddle

Upvotes: 2

Related Questions