Displaying a child pulldown from a main pulldown selection?

If i have a pulldown menu, within that pulldown menu i would like one of the selections in that menu to actually display another pulldown menu with options in it,(next to the original pulldown) how would i go about doing that.

i know this is confusing, but basically it's just a pulldown calling another pulldown based off of an original selection from the parent's list.  if you select something different from the parent list while the child pulldown is up, it should disappear. hope that makes sense, thanks!
t
LVL 1
toddkellerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rdivilbissCommented:
There are several variations to doing this, but this simple example should get you going.

http://www.rodsdot.com/ee/select-parent-child.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005 Roderick Divilbiss">
<script language="javascript" type="text/javascript">
<!--
var noSelect = '<- Choose a country';
var usaSelect = '<select size="1" name="state"><option>State 1</option><option>State 2</option><option>State 3</option></select>';
var englandSelect = '<select size="1" name="state"><option>Shire 1</option><option>Shire 2</option><option>Shire 3</option><option>Shire 4</option><option>Shire 5</option></select><option>Shire 6</option></select>';
var mexicoSelect = '<select size="1" name="state"><option>Estado 1</option><option>Estado 2</option><option>Estado 3</option><option>Estado 4</option></select>';
function changeCountry(oSel) {
      document.getElementById('childSelectDivide').innerHTML = eval(oSel[oSel.selectedIndex].value+'Select');
}
//-->
</script>
<title>Country Info</title>
<style>
<!--
#dSel        { position: absolute; left: 10; top: 10; width: 150; height: 35; right:160; bottom:45 }
#dDet {
      float: right;
      margin-left:200px;
      width: 400;
      border: 1px solid #000000;
      padding: 10px;
      height:100%;
      background-color:#D7D8D9;
      }
-->
</style>
</head>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="600" id="table1">
      <tr>
            <td width="100" valign="top">
              <select name="country" onchange="changeCountry(this);" size="1">
                <option value="no" selected>Select</option>
                <option value="usa">USA</option>
                <option value="england">England</option>
                <option value="mexico">Mexico</option>
              </select>
            </td>
            <td width="400" valign="top">
            <div id="childSelectDivide">&lt;- Choose a country
            </div>
            </td>
      </tr>
</table>
<body>
</body>

</html>
James RodgersWeb Applications DeveloperCommented:
here's my version, uses a js array, which can be populayed from a database query

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>1){
               for (x=objSub.options.length; x>0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
       arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
       arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
       arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
       arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
       arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
       arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                                         <option value="B">Boat</option>
                                                         <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160">
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                              
                </tr>
           </table>
      </form>
   </body>
</html>
toddkellerAuthor Commented:
Both are cool-thanks

rvilbliss--is there a way to make it so that the first pulldown already has the child up?-say if the usa one was first to be on the page and the select (no child) was next in the pulldown list?
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

rdivilbissCommented:
Yes.  http://www.rodsdot.com/ee/select-Parent-Child1.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005 Roderick Divilbiss">
<script language="javascript" type="text/javascript">
<!--
// The child selects
// var noSelect = '<- Choose a country';
var usaSelect = '<select size="1" name="state"><option>State 1</option><option>State 2</option><option>State 3</option></select>';
var englandSelect = '<select size="1" name="state"><option>Shire 1</option><option>Shire 2</option><option>Shire 3</option><option>Shire 4</option><option>Shire 5</option><option>Shire 6</option></select>';
var mexicoSelect = '<select size="1" name="state"><option>Estado 1</option><option>Estado 2</option><option>Estado 3</option><option>Estado 4</option></select>';
// The changing function
function changeCountry(oSel) {
    document.getElementById('childSelectDivide').innerHTML = eval(oSel[oSel.selectedIndex].value+'Select');
}
//-->
</script>
<title>Country Info</title>
</head>
<!--Shouldn't use tables for layout but it will do for this example-->
<table border="0" cellpadding="0" style="border-collapse: collapse" width="600">
<tr>
  <td width="100">
    <select name="country" onchange="changeCountry(this);" size="1">
      <option value="usa" selected>USA</option>
      <option value="england">England</option>
      <option value="mexico">Mexico</option>
     </select>
  </td>
  <td width="500" valign="top">
    <div id="childSelectDivide">&lt;- Choose a country</div>
  </td>
</tr>
</table>
<script>document.getElementById('childSelectDivide').innerHTML=usaSelect;</script>
</body>

</html>


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
toddkellerAuthor Commented:
cool, thanks! alot that worked well, i appreciate it. :)
t
toddkellerAuthor Commented:
both excellent answers, bliss' way fit my needs for now, but i'll study yours jester for the future, thanks much to both! :)
t
James RodgersWeb Applications DeveloperCommented:
glad we could help

thanks for teh points
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.