Version complète: jsB@nk » Form » Dropdown » 3 niveaux Chaining liste déroulante
URL: https://www.javascriptbank.com/3-chaining-levels-dropdown-list.html
Il s'agit d'un des JavaScripts que faire chaînage dropdown listes, dans ce JavaScript exemple est Pays, État, Ville, Sélectionnez un pays dans la première liste déroulante pour choisir HTML Etats de la seconde liste déroulante, pour les villes au cours de la dernière liste déroulante. Vous pouvez personnaliser cette Le code JavaScript que vous en avez besoin, comme les automobiles: type/marque/modèle ou de livres: éditeur/auteur/titre.
Version complète: jsB@nk » Form » Dropdown » 3 niveaux Chaining liste déroulante
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>