looking for a Triple combo Dropdown Menu

Question

Julia25 0 Light Poster

13 Years Ago

ive been searching for a triple combo dropdown script with go button and cant find one!
i found a double combo(http://www.javascriptkit.com/script/cut183.shtml) but im aiming for triple which they can choose country, State and city

need help!

javascript

2 Contributors
10 Replies
441 Views
18 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Julia25

All 10 Replies

Shanti C 106 Posting Virtuoso

13 Years Ago

check this link:
http://javascript.internet.com/forms/country-state-city-drop-down-list.html

Shanti C 106 Posting Virtuoso

13 Years Ago

i didn't get you clearly.

Shanti C 106 Posting Virtuoso

13 Years Ago

If you want to redirect to particular link based on drop down selection, user go button and capture the selected element in drop down, and redirect url.
Try to implement code and post your code here to fix.

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.

Julia25 0 Light Poster · Answer 1 · 2011-03-07T14:00:25+00:00

check this link:
http://javascript.internet.com/forms/country-state-city-drop-down-list.html

Thanks Shanti, that was a nice script but i dont know how to add a go button and add link to (ex. los angeles)

Julia25 0 Light Poster · Answer 2 · 2011-03-07T15:19:52+00:00

I tried downloading the script but i dont know how to modify it, like adding a "go" button, if you choose USA - California - Los Angeles
there should be a link to Los Angeles which if user press go it will go to specified link

Julia25 0 Light Poster · Answer 3 · 2011-03-07T15:54:34+00:00

If you want to redirect to particular link based on drop down selection, user go button and capture the selected element in drop down, and redirect url.
Try to implement code and post your code here to fix.

heres the code Shanti

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">

var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta']          = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario']          = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua']       = new Array('Ciudad Juárez','Chihuahua');
cities['Mexico']['Jalisco']         = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Florida']    = new Array('Miami','Orlando');
cities['United States']['New York']   = new Array('Buffalo','new York');


function setStates() {
  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];
  changeSelect('state', stateList, stateList);
  setCities();
}

function setCities() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  cityList = cities[cntrySel.value][stateSel.value];
  changeSelect('city', cityList, cityList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setStates();
});

</script>

<style type="text/css">
  .make_selection_back { background: url('Header_Looking_Image.jpg') no-repeat; width: 1160px; height: 245px; position: relative; }
  .make_selection_table { position: absolute; top: 170px; left: 505px; }
</style>


<body>


<div class="make_selection_back">

<form>
<table border="0" class="make_selection_table">
<tr>
  <td>Country:</td>
  <td>
    <select name="country" id="country" onchange="setStates();">
      <option value="Canada">Canada</option>
      <option value="Mexico">Mexico</option>
      <option value="United States">United States</option>
    </select>&nbsp;&nbsp;
  </td>
  <td>State:</td>
  <td>
    <select name="state" id="state" onchange="setCities();">
      <option value="">Please select a Country</option>
    </select>&nbsp;&nbsp;
  </td>
  <td>City:</td>
  <td>
    <select name="city"  id="city">
      <option value="">Please select a Country</option>
    </select>&nbsp;&nbsp;
  </td>
  <td><input type="submit" name="submit_form" value="Go!" /></td>
  
</tr>
</table>
</form>

</div><!--//make_selection_back-->


<br /><br />
<form action="./" method="GET">
</body>
</html>

Shanti C 106 Posting Virtuoso · Answer 4 · 2011-03-07T16:09:45+00:00

check the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">

var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta']          = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario']          = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua']       = new Array('Ciudad Juárez','Chihuahua');
cities['Mexico']['Jalisco']         = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Californialinks'] = new Array('LosAngeles.html','SanFrancisco.html');
cities['United States']['Florida']    = new Array('Miami','Orlando');
cities['United States']['Floridalinks']    = new Array('Miami.html','Orlando.html');
cities['United States']['New York']   = new Array('Buffalo','new York');
cities['United States']['New Yorklinks']   = new Array('Buffalo.html','new York.html');


function setStates() {
  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];
  changeSelect('state', stateList, stateList);
  setCities();
}

function setCities() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  cityList = cities[cntrySel.value][stateSel.value];
  cityLinksList = cities[cntrySel.value][stateSel.value+"links"];
  changeSelect('city', cityList, cityLinksList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setStates();
});
function redirect()
{
	x=document.getElementById("city").value;
	window.location=x;
}
</script>

<style type="text/css">
  .make_selection_back { background: url('Header_Looking_Image.jpg') no-repeat; width: 1160px; height: 245px; position: relative; }
  .make_selection_table { position: absolute; top: 170px; left: 505px; }
</style>


<body>


<div class="make_selection_back">

<form>
<table border="0" class="make_selection_table">
<tr>
  <td>Country:</td>
  <td>
    <select name="country" id="country" onchange="setStates();">
      <option value="Canada">Canada</option>
      <option value="Mexico">Mexico</option>
      <option value="United States">United States</option>
    </select>&nbsp;&nbsp;
  </td>
  <td>State:</td>
  <td>
    <select name="state" id="state" onchange="setCities();">
      <option value="">Please select a Country</option>
    </select>&nbsp;&nbsp;
  </td>
  <td>City:</td>
  <td>
    <select name="city"  id="city">
      <option value="">Please select a Country</option>
    </select>&nbsp;&nbsp;
  </td>
  <td><input type="button" name="submit_form" value="Go!" onclick="redirect();"/></td>
  
</tr>
</table>
</form>

</div><!--//make_selection_back-->


<br /><br />

</body>
</html>

Julia25 0 Light Poster · Answer 5 · 2011-03-07T16:46:17+00:00

Thanks Shanti
the link is working with USA but if you select Canada and Mexico problem occurs in the city dropdown, seem it disappear?

Shanti C 106 Posting Virtuoso · Answer 6 · 2011-03-07T16:54:08+00:00

i just showed an example for USA only.
You just write same kind of code with your required links by observing red color lines in the above code.then it will work.
If you don't know the basics in java script. Please read the tutorials online and try to change your code accordingly.
Thank you.

Julia25 0 Light Poster · Answer 7 · 2011-03-08T02:03:08+00:00

i just showed an example for USA only.
You just write same kind of code with your required links by observing red color lines in the above code.then it will work.
If you don't know the basics in java script. Please read the tutorials online and try to change your code accordingly.
Thank you.

Thanks Shanti, I got it now :)

looking for a Triple combo Dropdown Menu

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers