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!

Recommended Answers

i didn't get you clearly.

Jump to Post

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.

Jump to Post

All 10 Replies

i didn't get you clearly.

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

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.

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>

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>

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

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.

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 :)

Be a part of the DaniWeb community

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