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

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...

<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-

This question has already been answered. Start a new discussion instead.