Grow your CSS skills. Land your dream job.

I’ll give you a cookie if you can tell me what’s wrong

  • # December 17, 2012 at 11:07 am

    I have two selects on my page

    I use some jquery for client side filtering

    $(document).ready(function(){
    var $cat = $(‘select[name=category]‘),
    $items = $(‘select[name=items]‘);

    $cat.change(function(){
    var $this = $(this).find(‘:selected’),
    rel = $this.attr(‘rel’),
    $set = $items.find(‘option.’ + rel);

    if ($set.size() < 0) {
    $items.hide();
    return;
    }

    $items.show().find(‘option’).hide();

    $set.show().first().prop(‘selected’, true);
    });
    });​

    I’m using the latest version of jquery, dunno why my selects are behaving the way that they do.

    I got the idea from this jsfiddle

    http://jsfiddle.net/userdude/bY5LF/

    here’s my jsfiddle

    http://jsfiddle.net/kmarimon1/P89aT/

    I’ll give you a cookie for enlightening me!

    Thanks!

    # December 17, 2012 at 11:25 am

    it works fine for me i don’t know what is wrong for you? Sorry!

    # December 17, 2012 at 11:43 am

    it’s filtering for you? Are you sure?

    # December 17, 2012 at 1:22 pm

    Working fine for me too: http://jsfiddle.net/senff/zmzHw/

    (though I wouldn’t use just numbers as class names)

    # December 17, 2012 at 1:42 pm

    What browser are you using @KMarimon1?

    # December 17, 2012 at 2:53 pm

    It’s not working correctly for me; it just jumps to the start of the relevant part of the drop down list, but does not filter out the irrelevant cities. I’m using Safari 6.0. Also does not work on Chrome 23.0.1271.101. Does work on Firefox 13.0.1 though

    Unfortunately, I don’t have much skill in Javascript, so I’ll leave it to those more experienced, but thought you’d want to know what browsers it’s functioning in :)

    # December 17, 2012 at 4:21 pm

    Did a bit of research and found another solution for you that seems to be working in all of the browsers I’m using. I can’t take _any_ of the credit, but I will take _all_ of the cookies :D

    Solution found [here](http://stackoverflow.com/questions/7697936/jquery-show-hide-options-from-one-select-drop-down-when-option-on-other-select “http://stackoverflow.com/questions/7697936/jquery-show-hide-options-from-one-select-drop-down-when-option-on-other-select”).

    Codepen example with your data [here](http://codepen.io/David_Leitch/pen/ciAEJ “http://codepen.io/David_Leitch/pen/ciAEJ”)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".