0

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

3
Contributors
9
Replies
10
Views
7 Years
Discussion Span
Last Post by itisnot_me
0

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

0

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

0

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

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

0

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.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.