Marina Rose Marina Rose - 3 months ago 10
CSS Question

How to filter the contents of a div via a dropdown box and hide the results until the option is picked. (jsfiddle included)

So I gave this my best shot. Basically, I want to make a dropdown box that appears just like that - a dropdown box. Clean and simple. Then, when you click on a year, you get a list of text or links, whatever, of months for that year. Pretty basic right? I am failing terribly.

I think my issue is with my javascript/jquery.

Here is my JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});

function showHide() {
// hide all rows
$('.row').hide();
// show good row only

}</script>

Answer

I think you are looking for something like this https://jsfiddle.net/1mvfehpp/9/

<label for="select_class">
  <select id="select_category" class="selectSome">
    <option value="null">Year</option>
    <option value="row_c1">2006</option>
    <option value="row_c2">2007</option>
    <option value="row_c3">2008</option>
  </select>
</label>

Then added this jquery

$('#select_category').change(function () {
  $('.row').css("display","none");

  var fieldToShow = $(this).val();
  var className = fieldToShow.slice(-2);
  $("." + className).show();
});
Comments