Show/Hide jQuery

Using jQuery, the hide show part is easy.

I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.

What’s the easiest way to handle this?


Put a display:none on what you want to hide by default. Then trigger the .show() with an onclick event on the select box.

More specifically, use scripting to hide what you want hidden by default.

If instead you use CSS to hide them, they will be completely invisible to non-scripting users of your page.

I know what I need to do, it’s the doing, that is the problem.

This is what I have thus far


var optCountries = ["Austria", "Belgium", "Bulgaria", "Cyprus", "Czech Republic", "Denmark", "Estonia",
	"Finland", "France", "French Guiana", "French Southern Territories", "Germany",
	"Greece", "Hungary", "Ireland", "Isle of Man", "Italy", "Latvia", "Lithuania",
	"Luxembourg", "Malta", "Netherlands", "Netherlands Antilles", "Poland", "Portugal",
	"Romania", "Slovakia", "Slovenia", "Spain", "Sweden", "United Kingdom"];
var objCountry = $.makeArray(optCountries);

if($.inArray("Belgium", objCountry) > -1) $("#opt-section").show();


So how do I get the value of a select box called hqCountry in the if statement above where “Belgium” is, and get it to kick off with onchange?

One way is to use an attribute selector:

$('select').filter('[name="hqCountry"]').change(function () {