ok i don't know where to start my search cause i don't have to right terms.
what i would like to do is have to menus and have the second be changed dynamically.
ex:
in the first dropdown if the user selects a category, the subcategory will populate with sub categories of that category.
where could i go to get a easy script or a nice tut
thanks in advance
Do you prefer, short example?
sure what ever helps me out. haha
I'm done and sorry to keep you waiting!
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */
select { display : block; margin-top : 1em; }
div.hide { display : none; }
div.show { display : block; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var populate;
populate = function( ids, subCat ) {
//You can add more items here, on each category.
carcat = [ "Nissan", "Honda", "Toyota" ]; // Car categories
colcat = [ "Red", "Green", "Blue" ]; // Color categories
namcat = [ "Amy", "Bryan", "Catherine" ]; // Name categories
sel = (( document.getElementById ) ? document.getElementById( ids ) : (( document.all && !document.getElementById ) ? document.all[ ids ] : document.layers[ ids ] )); // First select element
sel2 = (( document.getElementById ) ? document.getElementById( subCat ) : (( document.all && !document.getElementById ) ? document.all[ subCat ] : document.layers[ subCat ] )); // Second select element ( sub category ).
div = (( document.getElementById ) ? document.getElementById("subcat") : (( document.all && !document.getElementById ) ? document.all.subcat : document.layers.subcat )); // Used to show and hide ( sub category ) select element.
if ( sel.selectedIndex !== 0 ) {
div.className = "show";
switch( sel.options[ sel.selectedIndex ].value ) {
case "car" : {
for ( x = 0; x < carcat.length; x++ ) {
sel2.remove( x );
sel2.add( new Option( carcat[ x ], "" ), x );
} break; }
case "col" : {
for ( x = 0; x < carcat.length; x++ ) {
sel2.remove( x );
sel2.add( new Option( colcat[ x ], "" ), x );
} break; }
case "nam" : {
for ( x = 0; x < carcat.length; x++ ) {
sel2.remove( x );
sel2.add( new Option( namcat[ x ], "" ), x );
} break; }
}
} else {
div.className = "hide";
alert("Please select category!");
sel.focus();
}
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="frm" action="#" onsubmit="return false;">
<div>
<select id="lists1" name="lists1" onchange="populate( this.id, 'lists2' );" size="1">
<option value="">Select Category</option>
<option value="car">CARS</option>
<option value="col">COLORS</option>
<option value="nam">NAMES</option>
</select>
</div>
<div id="subcat" class="hide">
<select id="lists2" name="list2" size="1">
<option value="">NOT SET</option>
</select>
</div>
</form>
</div>
</body>
</html>Hope it helps...
I am lousy at javascript, but here is the google search
http://www.google.com/search?hl=en&q=javascript+populate+menu+on+menu+select&meta=
and the site I got mine from
http://javascript.internet.com/forms/auto-drop-down.html
<bad pun>
if that was waiting then it is christmas.
</bad pun>
haha
looks great but the second menu that pops up does not have any values or text. i tried to look at it and figure it out but i didn't get anywhere.
Hmm, what could've missed from the first demo. Ok here's another one:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */
select {
display : block;
margin-top : 1em;
width : 200px;
height : 25px; }
div.hide { display : none; }
div.show { display : block; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var $;
$ = Object.prototype.$ = function( ids ) {
return (( document.getElementById ) ? document.getElementById( ids ) : (( document.all && !document.getElementById ) ? document.all[ ids ] : document.layers[ ids ] ));
};
var cats = {
car : [ "Nissan", "Honda", "Toyota" ],
colour : [ "Red", "Green", "Blue" ],
names : [ "Amy", "Bryan", "Catherine" ]
};
var populate = function() {
index = $("lists1").selectedIndex;
(( index ) ? $("subcat").className = "show" : $("subcat").className = "hide" );
for ( var x = 0; x
< cats[ $("lists1").options[ index ].value ].length; x++ ) {
$("lists2").remove( x );
$("lists2").add( new Option( String( cats[ $("lists1").options[ index ].value ][ x ] ), String( cats[ $("lists1").options[ index ].value ][ x ] )), x );
}
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="frm" action="#" onsubmit="return false;">
<div>
<select id="lists1" name="lists1" size="1" onchange="populate();">
<option value="">Please Select Category</option>
<option value="car">CARS</option>
<option value="colour">COLORS</option>
<option value="names">NAMES</option>
</select>
</div>
<div id="subcat" class="hide">
<select id="lists2" name="lists2" size="1">
<option value="">NOT SET</option>
</select>
</div>
</form>
</div>
</body>
</html>what browser are you using. cause i am using ff3 and still the same thing. I appreciate the help alot. that is why i love this forum.
but instead of making you tear your hair out i think that i will go with the link almostbob posted.
don't worry i think i will be back to this side of the forum.. haha
Im am using Opera v8.65 and all of those codes are working perfectly inside this browser.
Ok you do whatever it takes to get your code. TC-
ya i am not sure why it was not working. i didn't touch anything
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.