« »

This is one of JavaScripts that make chaining dropdown lists; in this JavaScript example is Country, State, City, select a country in first HTML dropdown for selecting states in the second dropdown, for cities in last dropdown.

You can customize this JavaScript code as you need, such as automobiles: type/make/model or books: publisher/author/title.

Label: 3, chaining, leve, dropdown, list, chaining dropdown, HTML dropdown, country, state, city

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Michael J. Damato :: http://developing.damato.net/ */

// State lists
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>

Copy All x2

<fieldset style="width: 230px;">
<legend><strong>Make your selection</strong></legend>
	<form name="test" method="post" action="processingpage.php">
	<table>
		<tbody>
			<tr>
				<td style="text-align: left;">Country:</td>
				<td style="text-align: left;">
					<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>
				</td>
			</tr>
			<tr>
				<td style="text-align: left;">State:</td>
				<td style="text-align: left;">
					<select name="state" id="state" onchange="setCities();">
						<option value="Alberta">Alberta</option>
						<option value="British Columbia">British Columbia</option>
						<option value="Ontario">Ontario</option>
					</select>
				</td>
			</tr>
			<tr>
				<td style="text-align: left;">City:</td>
				<td style="text-align: left;">
					<select name="city" id="city">
						<option value="Edmonton">Edmonton</option>
						<option value="Calgary">Calgary</option>
					</select>
				</td>
			</tr>
			</tbody>
		</table>
	</form>
</fieldset>

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (1)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz
Voice chat comning soon. You could talk to ChatGPT and hear the most intelligent AI speaks very soon

Cool Domains for Sale!

choose.works eChainBank.com ApexBTC.com ChainTutor.com this.bid CTRCoin.com CreditCard.rip CoinHolo.com Card.rip index.services choose.exchange CryptoKD.com ChatTotal.com YeuNu.com ZWVQ.com XMQV.com ABP3.com pornID.net system.money war.money

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

14/04/2009
Michael J. Damato [more]
5,559
0
6
1
6.2 KBytes

JavaScript 3 Chaining Levels Dropdown List

3.8/5 6 votes / 5,559 previews / 0 comment 14/04/2009 This is one of JavaScripts that make chaining dropdown lists; in ...JavaScript 3 Chaining Levels Dropdown List - 3 Chaining Levels Dropdown List

truongkt2002[13] bigbabyit ctbm03 Cao Phong vn2359[2] dantruongxp

Let's be first member to do this

truongkt2002