homepage Welcome to WebmasterWorld Guest from 54.205.52.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
if select category then show subcategories of this selected category
if select category then show subcategories of this selected category
harpreet9629




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

<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




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

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




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

can you give me code with live example i cant understand

Gowri pandiyan




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved