[SOLVED] using a dropdown

contra10 · January 21, 2009

I have a dropdown menue that populates when option one is selected...how can I create a thrid option ...dropdown one output dropdown two and dropdown 2 outputs dropdown 3... I also want to use php to enter it into mysql if that is possible

<script type="text/javascript">
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
</script>

contra10 · January 21, 2009

by the way this code is in a php file...hense the <script> tags

contra10 · January 21, 2009

is it possible?

webster08 · January 21, 2009

if your first one worked; then do it the same way as you did the first one. just change your function's name and change your selbox variable to something like:

var selbox = document.myform.optthree;

Psycho · January 21, 2009

<html>
<head>

<script type="text/javascript">


// State lists
var states = new Array();

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


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

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

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

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


function setStates(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  stateList = states[cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}

function setCities(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');

  cityList = cities[cntrySel.value][stateSel.value];

  changeSelect(citySel, cityList);

}

function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (var i=0; i<valuesAry.length; i++) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }

}

</script>

</head>

<body onload="setStates();">
<form name="test" method="POST" action="processingpage.php">

Country: 
<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>
<br><br><br>

State: 
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a Country</option>
</select>
<br><br><br>

City: 
<select name="city"  id="city">
  <option value="">Please select a Country</option>
</select>
</form>

</body>
</html>

contra10 · January 21, 2009

ok that worked and i want to add an extra dropdown menu in

<script type="text/javascript">

// country lists
var country = new Array();

country['NorthAmerica'] = ['Canada'];
country['Europe'] = ['Swiss'];
country['Asia'] = ['China'];

// State lists
var states = new Array();

states['NorthAmerica'] = new Array();
states['NorthAmerica']['Canada'] = ['Alberta','British Columbia','Ontario'];

states['Europe'] = new Array();
states['Europe']['Swiss'] = ['Test'];


states['Asia'] = new Array();
states['Asia']['China'] = ['ChineseProvince1'];


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

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

cities['Europe'] = new Array();
cities['Europe']['Swiss']['Test'] = ['Zurich'];

cities['Asia'] = new Array();
cities['Asia']['China']['ChineseProvince1'] = ['Los Angeles','San Francisco'];


function setCountry(){

contSel = document.getElementById('continent');
  cntrySel = document.getElementById('country');

  stateList = states[cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}
function setStates(){

contSel = document.getElementById('continent');
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  stateList = states[contSel.value][cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}

function setCities(){

	contSel = document.getElementById('continent');
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');

  cityList = cities[contSel.value][cntrySel.value][stateSel.value];

  changeSelect(citySel, cityList);

}

function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (var i=0; i<valuesAry.length; i++) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }

}

</script>

</head>

<body onload="setStates();">
<form name="test" method="POST" action="processingpage.php">

Continent: 
<select name="continent" id="continent" onchange="setCountry();">
  <option value="NorthAmerica">North America</option>
  <option value="Europe">Europe</option>
  <option value="Asia">Asia</option>
</select>
<br>

Country: 
<select name="country" id="country" onchange="setStates();">
  <option value="">Please select a country</option>
</select>
<br>

State: 
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a State/Province</option>
</select>
<br>

City: 
<select name="city"  id="city">
  <option value="">Please select a City</option>
</select>
</form>
?>

that doesn't seem to transfer any values

contra10 · January 21, 2009

i thhhink the problem is the set.values() cause my array seems ok...?

Psycho · January 21, 2009

There were several problems - the arrays and the code you modified. Here is the corrected code:

<script type="text/javascript">

// country lists
var country = new Array();
country['NorthAmerica'] = ['Canada'];
country['Europe'] = ['Swiss'];
country['Asia'] = ['China'];

// State lists
var states = new Array();

states['NorthAmerica'] = new Array();
states['NorthAmerica']['Canada'] = ['Alberta','British Columbia','Ontario'];

states['Europe'] = new Array();
states['Europe']['Swiss'] = ['Test'];


states['Asia'] = new Array();
states['Asia']['China'] = ['ChineseProvince1'];


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

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

cities['Europe'] = new Array();
cities['Europe']['Swiss'] = new Array();
cities['Europe']['Swiss']['Test'] = ['Zurich'];

cities['Asia'] = new Array();
cities['Asia']['China'] = new Array();
cities['Asia']['China']['ChineseProvince1'] = ['Los Angeles','San Francisco'];


function setCountry()
{
  contSel = document.getElementById('continent');
  cntrySel = document.getElementById('country');

  countryList = country[contSel.value];

  changeSelect(cntrySel, countryList);
  setStates();
}

function setStates(){

  contSel  = document.getElementById('continent');
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  stateList = states[contSel.value][cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}

function setCities(){

  contSel  = document.getElementById('continent');
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');

  cityList = cities[contSel.value][cntrySel.value][stateSel.value];

  changeSelect(citySel, cityList);

}

function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (var i=0; i<valuesAry.length; i++) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }
}

</script>

</head>

<body onload="setCountry();">
<form name="test" method="POST" action="processingpage.php">

Continent: 
<select name="continent" id="continent" onchange="setCountry();">
  <option value="NorthAmerica">North America</option>
  <option value="Europe">Europe</option>
  <option value="Asia">Asia</option>
</select>
<br>

Country: 
<select name="country" id="country" onchange="setStates();">
  <option value="">Please select a country</option>
</select>
<br>

State: 
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a State/Province</option>
</select>
<br>

City: 
<select name="city"  id="city">
  <option value="">Please select a City</option>
</select>
</form>

that doesn't seem to transfer any values

However, if you will have NO DUPLICATE VALUES (i.e. the ssame state name in two different countries) this is a more streamlined versions:

<script type="text/javascript">

// country lists
var country = new Array();
country['NorthAmerica'] = ['Canada','United States'];
country['Europe'] = ['Swiss'];
country['Asia'] = ['China'];

// State lists
var states = new Array();
//North America
states['Canada'] = ['Alberta','British Columbia','Ontario'];
states['United States'] = ['Florida','Oregon'];
//Europe
states['Swiss'] = ['Test'];
//Asia
states['China'] = ['ChineseProvince1'];


// City lists
var cities = new Array();
//North America
//--Canada
cities['Alberta']          = ['Edmonton','Calgary'];
cities['British Columbia'] = ['Victoria','Vancouver'];
cities['Ontario']          = ['Toronto','Hamilton'];
//--United States
cities['Florida']          = ['Orlando'];
cities['Oregon']           = ['Portland','Eugene'];
//Europe
//--Swiss
cities['Test'] = ['Zurich'];
//Asia
//--China
cities['ChineseProvince1'] = ['Los Angeles','San Francisco'];


function setCountry()
{
  contSel = document.getElementById('continent');
  cntrySel = document.getElementById('country');

  countryList = country[contSel.value];
  changeSelect(cntrySel, countryList);
  setStates();
}

function setStates()
{
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  stateList = states[cntrySel.value];
  changeSelect(stateSel, stateList);
  setCities();
}

function setCities()
{
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');

  cityList = cities[stateSel.value];
  changeSelect(citySel, cityList);
}

function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (var i=0; i<valuesAry.length; i++) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }
}

</script>

</head>

<body onload="setCountry();">
<form name="test" method="POST" action="processingpage.php">

Continent: 
<select name="continent" id="continent" onchange="setCountry();">
  <option value="NorthAmerica">North America</option>
  <option value="Europe">Europe</option>
  <option value="Asia">Asia</option>
</select>
<br>

Country: 
<select name="country" id="country" onchange="setStates();">
  <option value="">Please select a country</option>
</select>
<br>

State: 
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a State/Province</option>
</select>
<br>

City: 
<select name="city"  id="city">
  <option value="">Please select a City</option>
</select>
</form>

that doesn't seem to transfer any values

Sign In

[SOLVED] using a dropdown

Recommended Posts

contra10

Link to comment

Share on other sites

contra10

Link to comment

Share on other sites

contra10

Link to comment

Share on other sites

webster08

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

contra10

Link to comment

Share on other sites

contra10

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information