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?
Jump to PostYou can use
$('select').change(). If you show what you have so far, we can point you in the right direction.
Jump to PostThere 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 PostYou 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 PostDon't use
remove(which deletes the element), justhideit (then you canshowit again).
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.