dynamically change dropdown menus

Question

itisnot_me 0 Posting Whiz in Training

14 Years Ago

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

javascript

3 Contributors
9 Replies
101 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by itisnot_me

All 9 Replies

essential 84 Posting Shark

14 Years Ago

Do you prefer, short example?

essential 84 Posting Shark

14 Years Ago

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

almostbob 866 Retired: passive income ROCKS

14 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

itisnot_me 0 Posting Whiz in Training · Answer 1 · 2009-06-03T07:54:27+00:00

itisnot_me 0 Posting Whiz in Training

14 Years Ago

sure what ever helps me out. haha

itisnot_me 0 Posting Whiz in Training · Answer 2 · 2009-06-03T12:14:15+00:00

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

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-06-03T16:34:30+00:00

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>

itisnot_me 0 Posting Whiz in Training · Answer 4 · 2009-06-04T02:06:18+00:00

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

essential 84 Posting Shark Featured Poster · Answer 5 · 2009-06-04T05:31:50+00:00

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-

itisnot_me 0 Posting Whiz in Training · Answer 6 · 2009-06-04T05:58:02+00:00

ya i am not sure why it was not working. i didn't touch anything

dynamically change dropdown menus

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers