Link to home
Create AccountLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Hide/Show fields based on select box using jQuery

I have a form where I need to toggle fields based on a select. I have each field group (meaning the label and input)

I started this using jQuery.

I know I can add a class to the group and based on what is selected hide that class. The part that I think I will have trouble with is making it if you select anything else it will revert back to the default and they will all be shown.

Any ideas?

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Anurag Agarwal
Anurag Agarwal
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of catonthecouchproductions

ASKER

Thanks, will read more on that blog post.

I have this now:

	$('#isf_type_shipment_code').change(function() {
		$("#validateISF #isf_importer_record option:not([class])").show();
		$("#validateISF #isf_importer_record option.show" + $('#isf_type_shipment_code').val()).hide();
	});

Open in new window


I have this slightly modified to hide options instead of a divs ( will be working with divs after this)

I have it hiding my option correcting on change, but cant get it to show back if I select ANYTHING but.

Ideas?

Thanks again.
Updated code:

$('#isf_type_shipment_code').change(function() {
		$("#validateISF #isf_importer_record option:not([class])").show();
		$("#validateISF #isf_importer_record option.show" + $('#isf_type_shipment_code').val()).hide();
		if($('#validateISF #isf_importer_record option').hasClass('isfHidePassport')){
			$(".isfHidePassportRow").hide();	
		}

	});

Open in new window


I added the if to tell if that option has that isfHidePassport class then hide that div.isfHidePassportRow, what is the best way to show that field again after ANYTHING is selected, basically to set it back to default.

So close, then we can wrap this up. Thanks again.