Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Danh sách chọn thông minh
URL: https://www.javascriptbank.com/smarter-dynamic-select-options.html
Thêm một lựa chọn nữa dành cho bạn với hiệu ứng tạo các danh sách chọn chứa các giá trị liên quan nhau; chọn một giá trị trong danh sách chọn đầu thì danh sách chọn sau sẽ xuất hiện các giá trị tương ứng.Hiệu ứng này có giải thích rõ ràng và đầy đủ trong mã nguồn, các xử lí đơn giản và không dùng AJAX.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Danh sách chọn thông minh
URL: https://www.javascriptbank.com/smarter-dynamic-select-options.html
<script type="text/javascript">// Created by: Bobby van der Sluis | http://www.bobbyvandersluis.com/// Details can be found at:// http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.phpfunction dynamicSelect(id1, id2) { // Feature test to see if there is enough W3C DOM support if (document.getElementById && document.getElementsByTagName) { // Obtain references to both select boxes var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Clone the dynamic select box var clone = sel2.cloneNode(true); // Obtain references to all cloned options var clonedOptions = clone.getElementsByTagName("option"); // Onload init: call a generic function to display the related options in the dynamic select box refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // Onchange of the main select box: call a generic function to display the related options in the dynamic select box sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); }; }}function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Delete all options of the dynamic select box while (sel2.options.length) { sel2.remove(0); } // Create regular expression objects for "select" and the value of the selected option of the main select box as class names var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Iterate through all cloned options for (var i = 0; i < clonedOptions.length; i++) { // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { // Clone the option from the hidden option pool and append it to the dynamic select box sel2.appendChild(clonedOptions[i].cloneNode(true)); } }}// Multiple onload function created by: Simon Willison// http://simon.incutio.com/archive/2004/05/26/addLoadEventfunction addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}// addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);addLoadEvent(function() {dynamicSelect("pda-brand", "pda-type");});</script><form><div><select id="pda-brand"> <option value="select">Select PDA brand...</option> <option value="dell">Dell</option> <option value="hp">HP</option> <option value="palmone">PalmOne</option></select><select id="pda-type"> <option class="select" value="select">Select PDA type...</option> <option class="dell" value="aximx30">Axim X30</option> <option class="dell" value="aximx50">Axim X50</option> <option class="hp" value="ipaqhx2750">iPAQ hx2750</option> <option class="hp" value="ipaqrx3715">iPAQ rx3715</option> <option class="hp" value="ipaqrz1710">iPAQ rz1710</option> <option class="palmone" value="tungstene2">Tungsten E2</option> <option class="palmone" value="tungstent5">Tungsten T5</option> <option class="palmone" value="zire72">Zire 72</option></select></div></form>