Show subcategory dropdown only when a particular category is selected

**minni** · Jan 19, 2013 07:47

I have a form with a drop down box with 17 categories. I want to show subcategory dropdown only when a particular category is selected. Is this possible with javascript??

**gumape** · Jan 20, 2013 19:44

The subcategory dropdown will be shown only if the second option is selected in the main category dropdown:

Code HTML4Strict:

<head>
	<script>
		function ShowHideSubCat () {
			var mainCombo = document.getElementById ("mainCatCombo");
			var subCombo = document.getElementById ("subCatCombo");
			subCombo.style.display = (mainCombo.value == 'cat2') ? '' : 'none';
		}
	</script>
</head>
<body>
	<select id="mainCatCombo" onchange="ShowHideSubCat ()">
		<option value="cat1">Cat1</option>
		<option value="cat2">Cat2</option>
		<option value="cat3">Cat3</option>
	</select>
	<select id="subCatCombo" style="display: none;">
		<option value="subcat1">SubCat1</option>
		<option value="subcat2">SubCat2</option>
		<option value="subcat3">SubCat3</option>
	</select>
</body>

This example is the same as the previous one but it also works when the second option is selected initially ( onload="ShowHideSubCat ()" ):

Code HTML4Strict:

<head>
	<script>
		function ShowHideSubCat () {
			var mainCombo = document.getElementById ("mainCatCombo");
			var subCombo = document.getElementById ("subCatCombo");
			subCombo.style.display = (mainCombo.value == 'cat2') ? '' : 'none';
		}
	</script>
</head>
<body onload="ShowHideSubCat ()">
	<select id="mainCatCombo" onchange="ShowHideSubCat ()">
		<option value="cat1">Cat1</option>
		<option value="cat2" selected="selected">Cat2</option>
		<option value="cat3">Cat3</option>
	</select>
	<select id="subCatCombo" style="display: none;">
		<option value="subcat1">SubCat1</option>
		<option value="subcat2">SubCat2</option>
		<option value="subcat3">SubCat3</option>
	</select>
</body>

Also see the examples on the select object and event object pages. You will find them useful.

User Tag List

Thread: Show subcategory dropdown only when a particular category is selected

Thread Tools

Display

Show subcategory dropdown only when a particular category is selected

Bookmarks

Bookmarks

Posting Permissions