Multi Level Drop Down Category & Subcategory Hierarcheal Selection using JavaScript
This code will enable you to populate the list of states depending on the country selection. For example if you choose United States in the country drop down selection, the state drop down will contain Alaska, California etc. Else if you choose Canada, the state drop down list will contain Alberta, British Columbia etc.
All of this is done without reloading the page. This script could also be used in other formats, e.g., automobiles: type/make/model; or books: publisher/author/title. In order implement this script, perform the instructions below:
Create a file called countryStateCity.js and add the following code to the countryStateCity.js file.
| CODE |
|
/* Created by: Michael J. Damato | http://developing.damato.net/ */
states['Canada'] = new Array('Alberta','British Columbia','Ontario');
// City lists
cities['Canada'] = new Array();
cities['Mexico'] = new Array();
cities['United States'] = new Array();
function setStates() {
function setCities() {
function changeSelect(fieldID, newOptions, newValues) {
// Multiple onload function created by: Simon Willison
addLoadEvent(function() { |
Add the following code in the Head section of your web page:
| CODE |
| <script type="text/javascript" src="countryStateCity.js"></script> |
Add the following code to the body section of your web page:
| CODE |
|
<fieldset style="width: 230px;"> <legend><strong>Make your selection</strong></legend> <p> <form name="test" method="POST" action="processingpage.php"> <table> <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="">Please select a Country</option> </select> </td> </tr><tr> <td style="text-align: left;">City:</td> <td style="text-align: left;"> <select name="city" id="city"> <option value="">Please select a Country</option> </select> </td> </tr> </table> </form> </fieldset> |
Related Articles
- Validate a Check Box Using JavaScript
- Automatic Redirect using Javascript
- Flash and JavaScript Conflict: Javascript Menu goes behind the flash file
- Display Current Date Automatically on your Website using JavaScript
- How to Create a Reload Button which will Reload the Webpage upon Clicking using JavaScript
- Automatically Redirect from one Webpage to Another Webpage using JavaScript
- How to Display a Webpage in the PopUp Window after Clicking from a Link using JavaScript
- Disable Right Clicking on Webpage, Images and Photos with JavaScript
