Solved: Simple dynamic drop down menu

Create Account

Adobe Dreamweaver

Questions

Followers

Top Experts

Jovix

Simple dynamic drop down menu

I need to create a simple three part dynamic drop down menu. I will be using this on a form that will e-mail the information entered to an e-mail address.

I need three drop down boxes...
the first will have a list of auto manufacturers (like Honda, Toyota, Mazda)

the second field will dynamically be populated depending on what I select on the first field.
So if I select Toyota on the first field the second will say (Camry, Corolla, 4 runner, Land Cruiser)

And the 3rd field will be populated depending on what I select on the second field.
If I say 4 Runner I should get (4WD, 2WD,) etc... etc... etc...

can I do this without having to pull the data from a database, (I don't care if I have to type everything out)
And if I have to pull it from a database, how do I do it in dreamweaver MX.

I'm trying to do this using ASP.....

Thanks in Advance guys,
Jovix

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

kanary

hello Jovix,

u don't have to use database. u can store these info into XML file then parse it at runtime and grap ur data.

now u can open the XMl file and form ur dropdown menues.

i can help if u w r going to use flash
this could be done using javascript and asp too.

kanary.

Saqib Khan🇺🇸

if you need it done with javaScript, lemme know i will write source code for you.

YZlat🇺🇸

Put the following code in your <head> section of your index.asp page

<script LANGUAGE="javascript">

</script>

Then put this form on your page

<form name="frmMain" action="index.asp method="post">
<select name="make" onChange="submitFormAction('index.asp')">
<option value="0">Select Make</option>
<option value="1">Honda</option>
<option value="2">Toyota</option>
<option value="3">Mazda</option>
...
</select>

<select name="model" >
<option value="0">Select Model</option>

<%
if request("make")=1 then
%>
      <option value="1">Accord</option>
      <option value="2">Civic</option>
      ...
<%
elseif request("make") = 2 then
%>
      <option value="1">Camry</option>
      <option value="2">Corolla</option>
      <option value="3">4 runner</option>
      <option value="4">Land Cruiser</option>
      ...
<%
end if
%>
...
</select>

</form>

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

ASKER CERTIFIED SOLUTION

Saqib Khan🇺🇸

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

gladxml

if you want to use javasscript you can try the link below...

http://www.aspfree.com/articles/1358,1/articles.aspx

https://www.experts-exchange.com/questions/20555637/This-is-all-about-multiple-dropdown-boxes-and-onchange-procedure.html

if you want it to be database driven then you can refer to the link below...

https://www.experts-exchange.com/questions/20496541/Dynamical-3-way-drop-down-menu.html

HTH...

HAppy programming...

fixx17

Making drop down menus is far easier if you have Fireworks.

Do you have Fireworks?

They have an easy Gui Interface that gives you pop up menus with as many submeus off the pop up menus as well. You can do this with Firworks 5 or MX.

Jovix

ASKER

adilkhan...

I tried using you're code, but I'm not able to use numbers as part of the selections in the menu...for example.

I tried using a numbers here, I replaced "yama","Honda",etc... with "1999",2000",2001", but when I run the page it doesn't work, I get a runtime error. why?

var 1999 =new Array("1999","2000","2001")
var 2000 = new Array("1800","1900")
var 2001 = new Array("Mehran","Jeta","Isuzu","Civic")

can you help please..

thanks, Jovix

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

gladxml

Jovix,

http://www.aspfree.com/articles/1358,1/articles.aspx

Below is the code from the link above...

save this as optionex.html

======


<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>OptionEx Include</TITLE>

<script language=Javascript src="optionex.js"></script>
<script language=Javascript>

//create ourlink list of different model Series
var oModelSeries = new OptionCollection();
//add a few entries this can also be written via asp dynamically
//3 series
oModelSeries.Add("318","318 Series","3S");
oModelSeries.Add("318s","318s Series","3S");
oModelSeries.Add("320","320 Series","3S");
oModelSeries.Add("325","325 Series","3S");
oModelSeries.Add("328","328 Series","3S");
oModelSeries.Add("M3","M3 Series","3S");
//5 series
oModelSeries.Add("520","520 Series","5S");
oModelSeries.Add("525","525 Series","5S");
oModelSeries.Add("535","535 Series","5S");
oModelSeries.Add("540","540 Series","5S");
oModelSeries.Add("M5","M5","5S");
//7 series
oModelSeries.Add("735","735 Series","7S");
oModelSeries.Add("740","740 Series","7S");
oModelSeries.Add("750","750 Series","7S");

//okay so we have all the series for the models.
//lets add the colors of the series.
//again this can be written dynamically
var oSeriesColors = new OptionCollection();
oSeriesColors.Add("318red","Red color","318");
oSeriesColors.Add("318navy","Navy color","318");
oSeriesColors.Add("318silver","Silver color","318");
oSeriesColors.Add("318swhite","Red color","318s");
oSeriesColors.Add("318snavy","Navy color","318s");
oSeriesColors.Add("320silver","silver color","320");
oSeriesColors.Add("325white","white color","325");
oSeriesColors.Add("325red","red color","325");
oSeriesColors.Add("328navy","Navy color","328");
oSeriesColors.Add("328black","Black color","328");
oSeriesColors.Add("m3yellow","Yellow color","M3");
oSeriesColors.Add("m3gray","Gray color","M3");
//5 series
oSeriesColors.Add("520red","Red color","520");
oSeriesColors.Add("520navy","Navy color","520");
oSeriesColors.Add("520silver","Silver color","520");
oSeriesColors.Add("525white","Red color","525");
oSeriesColors.Add("525navy","Navy color","525");
oSeriesColors.Add("535silver","Silver color","535");
oSeriesColors.Add("535white","white color","535");
oSeriesColors.Add("535red","red color","535");
oSeriesColors.Add("540navy","Navy color","540");
oSeriesColors.Add("m5yellow","Yellow color","M5");
oSeriesColors.Add("m5gray","Gray color","M5");
//7 series
oSeriesColors.Add("735red","Red color","735");
oSeriesColors.Add("735navy","Navy color","735");
oSeriesColors.Add("740silver","Silver color","740");
oSeriesColors.Add("740white","Red color","740");
oSeriesColors.Add("740navy","Navy color","740");
oSeriesColors.Add("750silver","Silver color","750");

</script>
</HEAD>
<BODY>
<p align=center><h1>ASP Tips and Tricks</h1></p><br>
By: Salim Naim

<table><form name=carform id=carform>
      <tr><td><h3>Introduction</h3></td></tr>
      <tr><td>
            <table><tr><td><font face=arial size=2>


<p class=MsoNormal>As the web is transforming to providing much more data
driven dynamic content, it痴 only logical to provide user of your web site/web
applications, the application usability they are use to on their desktop
applications.</p>

<p class=MsoNormal>One of the most annoying things that I find when going to
web site whether it痴 a support site or online automotive web sites is the that
most list box selection are done in a simple and unusable manner. For example
multiple list box that contain a relationship together assume that the user
understands the relation and will obey the way the site or application wants
his/her interaction to be.</p>

<p class=MsoNormal>An example of what I知 going on about is an online used car
web site. Now the list box (<SELECT>) will have a selection of car type,
also another list box will be the series provided in this current model type
and finally the colors available for this model and series.</p>

<p class=MsoNormal>Now this article is about a generic JavaScript include file
that can be used to implement SELECT option relationships.</p>


            </td></tr></table>
      </td></tr>
      <tr><td>
            <table>
                  <tr>
                        <td colspan=6><font face=arial size=2><b>Example :  select the Model of interest and get all avaliable Series and color(s)</font></td>
                  </tr>
                  </tr>
                  <tr>
                        
                        <td align=right valign=top><font face=arial size=2><b>Model : </b></font></td>
                        <td align=left valign=top><SELECT name=model id=model onchange="UpdateSelect('series','carform',this.options[this.selectedIndex].value,oModelSeries);">
                              <option value="">[Select a Model]</option>
                              <option value="7S">BMW 7 Series</option>
                              <option value="5S">BMW 5 Series</option>
                              <option value="3S">BMW 3 Series</option>
                        </select></td>
                        <td align=right bgcolor=lightgrey><font face=arial size=2><b>Series : </b></font><br>
                        <a href="javascript:clearOptions('series','carform');"><font face=arial size=2><b>Clear All!</b></font></a>
                        </td>
                        
                        
                        
                        
                        <td align=left valign=top><SELECT name=series id=series onchange="UpdateSelect('carcolors','carform',this.options[this.selectedIndex].value,oSeriesColors);">
                              <option>[Select a Series]</option>
                              <option></option>
                              <option></option>
                              <option></option>
                        </select></td>
                        <td align=right bgcolor=lightgrey><font face=arial size=2><b>Color(s) : </b></font><br>
                        <a href="javascript:clearOptions('carcolors','carform');"><font face=arial size=2><b>Clear All!</b></font></a>
                        </td>
                        <td align=left valign=top><SELECT name=carcolors id=carcolors >
                              <option>[Select a color(s)]</option>
                              <option></option>
                              <option></option>
                              <option></option>
                        </select></td>
                  </tr>
            </table>
      </td></tr>
</form></table>
<table>
      <tr><td><h3>Help?</h3></td></tr>
      <tr><td>
            <table><tr><td><font face=arial size=2>

Using the example, just select the car model you are
interested in and the series selection will be dynamically updated for you, the
clear all is an option to clear all the list box entries. Once a series is
selected, a color will be updated for that series in the color list box.

            </font></td></tr></table>
      </td></tr>
</table>

<table>
      <tr><td bgcolor=DarkGray><h3>Explanation</tr>
      <tr><td>
            <table><tr><td><font face=arial size=2>


<p class=MsoNormal>To use optionex.js, all you have to do is just follow the
following steps.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal>1 -<span style='mso-tab-count:1'> </span><b><script
language=JavaScript src="optionex.js"></script><o:p></o:p></b></p>

<p class=MsoNormal>once you have added the library, all the code need to
implement a relationship between the list box is included.</p>

<p class=MsoNormal><i>Note</i>: if you view the source of the library, two
things can be learnt,</p>

<p class=MsoNormal><span style='mso-tab-count:1'> </span>1<span
style='mso-tab-count:1'> </span>- <span style='mso-tab-count:1'> </span>implementing
a link list in JavaScript.</p>

<p class=MsoNormal><span style='mso-tab-count:1'> </span>2<span
style='mso-tab-count:1'> </span>-<span style='mso-tab-count:1'> </span>dynamically
programming the select element in IE and navigator.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal>2 - <span style='mso-tab-count:1'> </span>Now that you
have included the library the next thing to do is to create our custom
OptionCollection class </p>

<p class=MsoNormal><b><span style='mso-tab-count:1'> </span>var
oModelSeries = new OptionCollection();<o:p></o:p></b></p>

<p class=MsoNormal>This is the collection of entries for the Model to series
relationship.</p>

<p class=MsoNormal><b><span style='mso-tab-count:1'> </span>var
oSeriesColors = new OptionCollection();<o:p></o:p></b></p>

<p class=MsoNormal>This is the collection of entries for the Series to color
relationship.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal>3 -<span style='mso-tab-count:1'> </span>the next
thing to do is enter the information that links the paren listbox with the
child list box. This is done via the function</p>

<p class=MsoNormal style='margin-left:.5in;text-indent:.5in'><b><i>object</i>.Add(child,childcaption,parent)
;<o:p></o:p></b></p>

<p class=MsoNormal style='margin-left:.5in;text-indent:.5in'><b><![if !supportEmptyParas]> <![endif]><o:p></o:p></b></p>

<p class=MsoNormal>Now lets have a close look at the parameters that ADD needs,</p>

<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo1;
tab-stops:list .75in'><![if !supportLists]>1<span style='font:7.0pt "Times New Roman"'>       
</span><![endif]>- <b>child</b> this is the unique id for the child element.
This argument is basically what痴 going to be placed in the <option
value=把hild・gt; section of the <option> tag</p>

<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo1;
tab-stops:list .75in'><![if !supportLists]>2<span style='font:7.0pt "Times New Roman"'>       
</span><![endif]>・<b>childcaption</b> this is the label associated with this
child value.</p>

<p class=MsoNormal style='margin-left:.75in;text-indent:-.25in;mso-list:l0 level1 lfo1;
tab-stops:list .75in'><![if !supportLists]>3<span style='font:7.0pt "Times New Roman"'>       
</span><![endif]>・<b>parent</b> this is the unique value in the parent or
triggering list box that is associated with this element.</p>

<p class=MsoNormal style='margin-left:.5in'><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal><i>Note </i>: that the assumption of unique is made, yes the
library expects that the<span style="mso-spacerun: yes"> </span>values that
form the relationship are unique. This might at first seem silly and that I知
stating the obvious but I値l go over this again. The model number in our
example eg.3S must be unique in the model list box and the child elements for
this model must all have unique values as well as a relationship link to there
parent relation.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal>4 -<span style='mso-tab-count:1'> </span> The last
step you have to follow to have the sample implemented is trigger the update in
the calling list box.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoBodyText>Eg:
onchange="UpdateSelect('series','carform',this.options[this.selectedIndex].value,oModelSeries);"</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

<p class=MsoNormal>now the function UpdateSelect is were all the magic of this
library begins, the first parameter is the name of the child list box to
update, the second parameter is the name of the form <FORM> that the two
related list box are in. the fourth parameter is the currently selected list
box option (this remains the same), the last parameter is the collections to
use to peform the update from.</p>

<p class=MsoNormal>And that・basically it, we have a collections of our values
and a generic function that updates the related select elements using the
collection provided.</p>

<p class=MsoNormal><![if !supportEmptyParas]> <![endif]><o:p></o:p></p>

            </font></td></tr></table>
      </td></tr>
</table>

<table>
      <tr><td><h3>Hacks to add</h3></td></tr>
      <tr><td>
            <table><tr><td><font face=arial size=2>

<p class=MsoNormal>Now the sample is fine but it needs a few hacks to make sure
that it functions under navigator. Now navigator doesn稚 handle dynamic select
element expansion too well so you have to enter dummy <OPTION> tags to
foul it to render the dropdown section correctly. So we have to add dummy
<OPTION></OPTION> in the select section of the child select
element.</p>

<p class=MsoNormal>The other hack is the width, the width of a select element
has to dynamically change when the content changes, navigator also doesn稚 support
this feature. So to pull a blind one on it, all you have to do is place a
standard <OPTION>[Select ・]</OPTION> tag that will set a width for
our list box.</p>

<p class=MsoNormal>Other than these two hacks, the library will work on any 4.X
browsers.</p>

<p class=MsoNormal>For extra information you can reach me at</p>

<p class=MsoNormal><a href="http://salimnaim.webjump.com/">http://salimnaim.webjump.com</a></p>

            </font></td></tr></table>
      </td></tr>
</table>

</BODY>
</HTML>

========== then save this as optionex.js

var NS4 = (document.layers)?true:false;
var IE4 = (document.all)?true:false;

function _struct(child,childcaption,parent){
this.child = child;
this.childcaption = childcaption;
this.parent      = parent;
}
function _addobject(child,childcaption,parent){
var obj = new _struct();
obj.child = child;
obj.childcaption = childcaption;
obj.parent = parent;
return(obj);
}
function insertEntry(child,childcaption,parent){
      if(child.length > 0 ){
            for(var i=0;i<this.length;i++)
                  if(this.items[i].child == child)
                        return;
            this.items[this.length++] = _addobject(child,childcaption,parent);
      }
}
function OptionCollection(){
this.length=0;
this.items = new Object();
this.Add=insertEntry
}

function clearSelect(oSelect){
var iCount=0;
if(!oSelect) return;
iCount = oSelect.options.length;
for(var i=0;i<iCount;i++){
      if(IE4)
            oSelect.options.remove(0);
      else if(NS4)
            oSelect.options[0]=null;
}
}
function addOptions(oSelect,olist,parent){
      var elOption;
      var idxSelect=0;

      //check arguments.
      if((!olist) || (!oSelect))return;
      if(parent.length <=      0)       return;

      //now looop through all the list items only entering relevant options.
      clearSelect(oSelect);

      //add a blank list
      elBlankOption = new Option();
      elBlankOption.text = "";
      if(NS4) oSelect.options[0] = elBlankOption
      else if(IE4) oSelect.options.add(elBlankOption,0)

      elBlankOption.value = "";
      for(var i=0;i<olist.length;i++){
            //only the child entries of the parent
            if(olist.items[i].parent == parent){
                  elOption = new Option();
                  //now IE and NS have a different way to handle object creation.
                  if(NS4){
                        elOption.value = olist.items[i].child
                        elOption.text = olist.items[i].childcaption
                        oSelect.options[idxSelect] = elOption
                  }else if(IE4){
                        elOption.value = olist.items[i].child
                        elOption.text = olist.items[i].childcaption
                        oSelect.options.add(elOption,idxSelect)
                  }
                  idxSelect++;
                  delete(elOption);
            }
      }
}

function clearOptions(szSelect,szForm){
if(szSelect.length <= 0 || szForm.length <=0)
      alert("error:clearOption must pass arguments");
if(IE4)
clearSelect(document.all.item(szSelect));
else if(NS4)
clearSelect(eval('document.' + szForm + '.' + szSelect));
}

function listAllOptions(szSelect,szForm,olist){
      var elOption;
      var idxSelect=0;
      var oSelect = new Object();

      //check arguments.
      if(!olist)return;

      if(IE4)
             oSelect = document.all.item(szSelect);
      else if(NS4)
            oSelect = eval('document.' + szForm + '.' + szSelect);

      if(!oSelect)return;

      //now looop through all the list items entering all
      clearSelect(oSelect);
      for(var i=0;i<olist.length;i++){
            elOption = new Option();
            //now IE and NS have a different way to handle object creation.
            if(NS4){
                  elOption.value = olist.items[i].child
                  elOption.text = olist.items[i].childcaption
                  oSelect.options[idxSelect] = elOption
            }else if(IE4){
                  elOption.value = olist.items[i].child
                  elOption.text = olist.items[i].childcaption
                  oSelect.options.add(elOption,idxSelect)
            }
            idxSelect++;
            delete(elOption);
      }
}

function UpdateSelect(szSelect,szForm,szParent,olist){
if(IE4)
addOptions(document.all.item(szSelect),olist,szParent);
else if(NS4)
addOptions(eval('document.' + szForm + '.' + szSelect),olist,szParent);
}

HTH...

HAppy programming...

Saqib Khan🇺🇸

Jovix Your Variables names CANNOT start with a Number. They must start with a Letter or $ sign

What you can do is name them like this

var a_1999 = new Array("111","222")
var a_2000 = new Array("2000","333")

mahine

I've tried to do it with Fireworks MX but when I create a pop up menu it looks nice but when I click with the mouse outside de pop up menu area it dissapears!!! and I don't want it to do this, I want the fist layer of the menu, or my main menu, be static!!, how can I solve this little problem?????

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

Saqib Khan🇺🇸

You Should ask this as a new Question.

But anyway, Take out onMouseOut Event from your Button in HTML.

swmson

I need this same solution but can't seem to understand the setup/strategy provided here. Can someone give me the big picture & how these parts fit into it?
Thanks...

Adobe Dreamweaver

Questions

Followers

Top Experts

Adobe Dreamweaver is a web development tool featuring both WYSIWYG and code editors that allow the user to quickly and easily build websites in a wide variety of languages, including ASP, ASP.NET, ColdFusion and PHP. It also offers support for CSS and JavaScript.