I have a basic idead of jQuery and can do some basic stuff, but I can't figure out how to do the following:

I need jQuery to do the following function when you SELECT an option from a form Dropdown selection...

When a person selects PS3 in drop down it will hide all DIVs with the class of .container that do not have the class .ps3 in it.

How can I do this?

Recommended Answers

You can use $('select').change(). If you show what you have so far, we can point you in the right direction.

Jump to Post

There is no select with id="Windows". Once the id is correct, the windows div's will always be removed. When the select changes, you'll need to check the selected value first.

Jump to Post

You want to act on the change of filterBox1, so the change line should be:

$('#filterBox1').change(function() { // when value of filterBox1 changes
    var selection = $(this).val();   // get it's value
    if (selection == 'Windows') {    // if it is Windows then
        // ...
Jump to Post

Don't use remove (which deletes the element), just hide it (then you can show it again).

Jump to Post

All 14 Replies

You can use $('select').change(). If you show what you have so far, we can point you in the right direction.

$(window).load(function() {
    $('#Windows').change(function() {
        $(".tb-container:not(:has(img.windows))").remove();
    });
});

However, it doesn't work. Test Site: http://zanime.net/test/

There is no select with id="Windows". Once the id is correct, the windows div's will always be removed. When the select changes, you'll need to check the selected value first.

It surprises me how many people insist on talking to me like I'm some coding expert...I understood id="Windows" but that doesn't really help me get the proper code to use.

You want to act on the change of filterBox1, so the change line should be:

$('#filterBox1').change(function() { // when value of filterBox1 changes
    var selection = $(this).val();   // get it's value
    if (selection == 'Windows') {    // if it is Windows then
        // ...

Thank you. That worked great. One Question though if I wanted to create a RESET button how would I do that?

Don't use remove (which deletes the element), just hide it (then you can show it again).

I ran into an issue. If I select Mac or Linux from #FilterBox1 it also removes DIVs that have a img.windows

How can I change it so each selection won't do the above (i.e. if I slect Mac it will remove any DIVs that do not have img.mac in it?

$(window).load(function() {
    $('#filterBox1').change(function() {
        $(".tb-container:not(:has(img.windows))").hide();
    });
});

I tried:

$(window).load(function() {
    $('#filterBox1').change(function() {
        if(val==windows) {
           $(".tb-container:not(:has(img.windows))").hide();
        }
    });
});

However, it did not work.

See my example again. Compare your line 3 with my line 2 and 3.

How can I tell my Rest button to refresh the page? That way it will reset the filter choices?

Oh and thanks that works great.

Something like this:

$('#filterBox1').val('');
$('.tb-container').show();

It works in Opera and IE9... I don't have FF.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.