2
Contributors
10
Replies
11
Views
6 Years
Discussion Span
Last Post by Julia25
0

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

0

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.

0

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>
0

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>
0

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

0

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.

0

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

Edited by Julia25: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.