Jump to content

[SOLVED] 3 stage dropdown menus


sean14592

Recommended Posts

I for my site I need a select city. I will do this by first allowing them to select country, then county then city.

 

For example....

Albania >> Central Albania >> Ardenica

 

So far I have managed to do the part were you click the country then it updates the area, but need to know how to do the next step... Here is my code so far....

 

dropdown.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Change selection in one box from another</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <script type="text/javascript" src="http://www.domain.com/include/countrydrop.js"></script>
<form name="f1" method="post" action="/" onSubmit="return false;">

  <p name="m1" onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();">
    <select name="m3" onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();">
          <option value="/" selected>Pick Country >>
          <option value="/">Albania</option>
            
                </select>
  </p>
</form></td><td><form name="f2" method="post" action="/" onsubmit="return false;"><select name="m2" onchange="jmp(this.form,0)"><option value="/">---</option></select></form>
</body>
</html>

 

countrydrop.js

v=false;
if (typeof(Option)+"" != "undefined") v=true;

<!--  Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
   }
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) location=options[i].value;
      }
   }
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) {  // default category item
a=new Array();
O("---","");
}

if(j==1) { // Albania
a=new Array();
O("<- Please Select ->");
O("Central Albania");
O("Eastern Albania");
O("Ionian Coast");
O("Northeastern Albania");
O("Northern Adriatic Coast");
O("Northwestern Albania");
O("Southern Adriatic Coast");
O("Southern Albania");
O("Tirana and Surroundings");
}





aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
      }
   }
} else {
jmp(formName,elementNum);
   }
}
// End -->

 

 

Please can somebody hep me, I would be very greatful.

Cheers

Sean Preston

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.