Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Danh sách chọn kiểu liên kết ba cấp
URL: https://www.javascriptbank.com/3-chaining-levels-dropdown-list.html
Đây là một trong những hiệu ứng tạo danh sách liên kết sử dụng trình đơn xổ dọc, ví dụ trong đoạn mã này là quốc gia, tiểu bang và thành phố. Khi người dùng chọn một quốc gia trong trình đơn đầu tiên thì các tiểu bang tương ứng của quốc gia được hiển thị trong trình đơn thứ hai và tương ứng là các thành phố cho trình đơn còn lại.Bạn có thể tinh chỉnh tùy theo nhu cầu của mình, chảng hạn như dùng cho điện thoại: loại/hãng/mẫu hay sách: nhà xuất bản/tác giả/tựa.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Danh sách chọn kiểu liên kết ba cấp
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>