Advanced Search

jQuery: Capturing Drop Down Data + Show / Hiding Secondary Drop Downs

/ Published in: jQuery
Save to your folder(s)
I needed a way to show "US States" element whenever the user selected "United States" as their country. Here's a live demo: http://demo.chrisaiv.com/dropdown

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function() {
  2.  
  3. 	$("#country").bind("change", onSubmitChangeHandler);
  4. 	function onSubmitChangeHandler( e ){
  5. 		if( $("#country").val() == "United States" ) $("#state").css( "display", "inline" );
  6. 		else $("#state").css( "display", "none" );				
  7. 	}
  8.  
  9. 	$("#leftColumn :submit").bind("click", onSubmitClickHandler);
  10. 	function onSubmitClickHandler( e ){
  11. //		console.log( "All of the States: " + $('#leftColumn #state *').fieldValue(false) );
  12. //		console.log( $('#leftColumn #country *').fieldValue(false) );
  13. 		console.log( "State: " + $("#state").val() + " (Idx=" +  $.inArray( $("#state").val(), $('#state *').fieldValue(false) ) + ")" );
  14. 		console.log( "Country: " + $("#country").val() + " (Idx=" + $.inArray( $("#country").val(), $('#country *').fieldValue(false) ) + ")" );
  15. 	}
  16. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.