Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm tùy chọn 2
URL: https://www.javascriptbank.com/adding-options-2.html
Thêm một đoạn mã JavaScript khác để thực hiện việc thêm hay thay đổi các tùy chọn trong một danh sách, hiệu ứng JavaScript này còn cho phép chọn các tùy chọn con.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Thêm tùy chọn 2
URL: https://www.javascriptbank.com/adding-options-2.html
<script language="javascript">// Created by: Carl Leiby - http://leibys-place.comvar otherStuff = { "item 1" : [ "subitem 1.1", "subitem 1.2", "subitem 1.3", "subitem 1.4" ], "item 2" : [ "subitem 2.1", "subitem 2.2" ], "item 4" : [ "subitem 4" ], "item 6" : [ "subitem 6.1", "subitem 6.2" ]};function selectAll(listName, selected) { var listBox = document.getElementById(listName); for(i=0; i<listBox.length; i++) { listBox.options[i].selected=selected; } if( listBox.onchange ) { listBox.onchange(); }}function lstStuff_OnChange() { var listBox = document.getElementById("lstStuff"); var subListBox = document.getElementById("lstOtherStuff"); subListBox.options.length=0; for(i=0; i<listBox.length; i++) { if( listBox.options[i].selected ) { var key = listBox.options[i].text; if(otherStuff[key]) { for(j=0; j<otherStuff[key].length; j++) { subListBox.options.add(new Option(otherStuff[key][j],otherStuff[key][j])); } } } }}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form><select id="lstStuff" multiple="multiple" onchange="lstStuff_OnChange()" size="6" style="width: 200px;"> <option>item 1</option> <option>item 2</option> <option>item 3 (No Sub-Items)</option> <option>item 4</option> <option>item 5 (No Sub-Items)</option> <option>item 6</option></select><br>Select: <a href="javascript:selectAll('lstStuff', true);">all</a> |<a href="javascript:selectAll('lstStuff', false);">none</a><br><br><select id="lstOtherStuff" multiple="multiple" size="6" style="width: 200px;"></select><br>Select: <a href="javascript:selectAll('lstOtherStuff', true);">all</a> |<a href="javascript:selectAll('lstOtherStuff', false);">none</a></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->