if select category then show subcategories of this selected category - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

if select category then show subcategories of this selected category

if select category then show subcategories of this selected category

harpreet9629

6:16 pm on Feb 23, 2013 (gmt 0)

10+ Year Member

<select name="category">
<option value="0">Select Category</option>
<option value="1">ABC</option>
<option value="2">123</option>
<option value="3">abc</option>
</select>

if i select ABC category then show only this category subcategories:-
<select name="subcategory">
<option value="0">Select Sub-Category</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>

if i select 123 category then show only this category subcategories:-
<select name="subcategory">
<option value="0">Select Sub-Category</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

if i select abc category then show only this category subcategories:-
<select name="subcategory">
<option value="0">Select Sub-Category</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

if select category then show subcategories of this selected category

how make javascript for this please help me thank you.

daveVk

1:35 am on Feb 24, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Consider giving subcategory selects different names, having multiple selects with same name likely to cause problems. If same name is a must, add/remove options from single select based on category.

Place subcategory selects within div with id="subcats" in category value order, each select with style="display:none"

function changeSelect( selectNo ) {
var sels = document.getElementById("subcats").getElementsByTagName('SELECT');
for( var j=0; j<sels.length; j++ ) {
sels[j].style.display = none;
if ( j===(selectNo-1) { sels[j].style.display = ''; }
}
}

<select name="category" onchange="changeSelect( this.value )" >

harpreet9629

5:57 pm on Feb 24, 2013 (gmt 0)

10+ Year Member

can you give me code with live example i cant understand

Gowri pandiyan

6:10 am on Mar 5, 2013 (gmt 0)

10+ Year Member

Below is the clean code for the same. Kindly, check the below code.
<HTML>
<HEAD>
<script>
function changeSelect( selectNo )
{
var sels = document.getElementById("subcats").getElementsByTagName('SELECT');
for( var j=0; j<sels.length; j++ )
{
sels[j].style.display = "none";
if ( j===(selectNo-1) )
{ sels[j].style.display = ''; }
}
}

</script>

</HEAD>

<BODY>

<select name="category" onchange="changeSelect( this.value )">
<option value="0">Select Category</option>
<option value="1">ABC</option>
<option value="2">123</option>
<option value="3">abc</option>
</select>
<div id="subcats">
<select name="subcategory" style="display:none">
<option value="0">Select Sub-Category</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>

<select name="subcategory" style="display:none">
<option value="0">Select Sub-Category</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select name="subcategory" style="display:none">
<option value="0">Select Sub-Category</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>
</BODY>

</HTML>