Full version: jsB@nk » Form » Dropdown » 3 Chaining Levels Dropdown List
URL: https://www.javascriptbank.com/3-chaining-levels-dropdown-list.html
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.
Full version: jsB@nk » Form » Dropdown » 3 Chaining Levels Dropdown List
URL: https://www.javascriptbank.com/3-chaining-levels-dropdown-list.html
<script type="text/javascript"><!--/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated by: Michael J. Damato :: http://developing.damato.net/ */// State listsvar 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 listsvar 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><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>