Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript custom multi-level linkage drop-down menu</title><script type="text/javascript">Var $ = function (id) {return "string" = typeof id? Document. getElementById (id): id ;}; function addEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. addEventListener) {oTarget. addEventListener (sEventType, fnHandler, false);} else if (oTarget. attachEvent) {oTarget. attachEvent ("on" + sEventType, fnHandler);} else {oTarget ["on" + sEventType] = fnHandler; }}; function Each (arrList, fun) {for (var I = 0, len = arrList. length; I <len; I ++) {Fun (arrList [I], I) ;}; function GetOption (val, txt) {var op = document. createElement ("OPTION"); op. value = val; op. innerHTML = txt; return op;}; var Class = {create: function () {return function () {this. initialize. apply (this, arguments) ;}} Object. extend = function (destination, source) {for (var property in source) {destination [property] = source [property];} return destination;} var Cascade Select = Class. create (); CascadeSelect. prototype = {// select set, menu object initialize: function (arrSelects, arrMenu, options) {if (arrSelects. length <= 0 | arrMenu. lenght <= 0) return; // menu object var oThis = this; this. selects = []; // select set this. menu = arrMenu; // Menu object this. setOptions (options); this. default = this. options. default | []; this. showEmpty = !! This. options. showEmpty; this. emptyText = this. options. emptyText. toString (); // Set The Selects set and change event Each (arrSelects, function (o, I) {addEventHandler (oThis. selects [I] = $ (o), "change", function () {oThis. set (I) ;}); this. reSet () ;}, // set the default property SetOptions: function (options) {this. options = {// Default value: Default: [], // Default value (in order) ShowEmpty: false, // whether to display a null value (in the first place) EmptyText: "Please select" // the text displayed with a null value (valid when ShowEmpty is true )}; Object. extend (this. options, options | |{}) ;}, // initialize select ReSet: function () {this. setSelect (this. selects [0], this. menu, this. default. shift (); this. set (0) ;}, // All select Settings Set: function (index) {var menu = this. menu // The first select statement does not need to be processed. Therefore, it starts from 1 for (var I = 1, len = this. selects. length; I <len; I ++) {if (menu. length> 0) {// Obtain the menu var value = this. selects [i-1]. value; if (value! = "") {Each (menu, function (o) {if (o. val = value) {menu = o. menu | [] ;}}) ;}else {menu = [] ;}// set the menu if (I> index) {this. setSelect (this. selects [I], menu, this. default. shift () ;}} else {// no data this. setSelect (this. selects [I], [], "") ;}// clear the default value this. default. length = 0 ;}, // select SetSelect: function (oSel, menu, value) {oSel. options. length = 0; oSel. disabled = false; if (this. showEmpty ){ OSel. appendChild (GetOption ("", this. emptyText);} if (menu. length <= 0) {oSel. disabled = true; return;} Each (menu, function (o) {var op = GetOption (o. val, o.txt? O.txt: o. val); op. selected = (value = op. value); oSel. appendChild (op) ;};}, // Add menu: function (menu) {this. menu [this. menu. length] = menu; this. reSet () ;}, // Delete menu: function (index) {if (index <0 | index> = this. menu. length) return; for (var I = index, len = this. menu. length-1; I <len; I ++) {this. menu [I] = this. menu [I + 1];} this. menu. pop () this. reSet () ;}}; window. onload = function () {Var menu = [{'Val ': '1', 'txt': 'value'}, {'Val ': '2->', 'menu ': [{'Val': '2 _ 1'}, {'Val': '2 _ 2'}]}, {'Val': '3-> ', 'menu ': [{'Val': '3 _ 1-> ', 'menu': [{'Val ': '3 _ 1_1'}, {'Val ': '3 _ 1_2 '}]}, {'Val': '3 _ 2'}]}, {'Val ': '4->', 'menu ': [{'Val ': '4 _ 1->', 'menu ': [{'Val': '4 _ 1_1-> ', 'menu ': [{'Val ': '4 _ 1_1_1'}]; var sel = ["sel1", "sel2", "sel3", "sel4 ", "sel5"]; var val = ["3-> ", "3_1->", "3_1_2"]; var cs = new CascadeSelect (sel, menu, {Default: val}); $ ("btnA "). onclick = function () {cs. showEmpty =! Cs. showEmpty;} $ ("btnB "). onclick = function () {cs. add ({'Val ': '5->', 'menu ': [{'Val': '5 _ 1-> ', 'menu ': [{'Val ': '5 _ 1_1->', 'menu ': [{'Val': '5 _ 1_1_1-> ', 'menu ': [{'Val ': '5 _ 1_1_1'}]})} $ ("btnC "). onclick = function () {cs. delete (3 )}}</script><style type="text/css">. Sel select {width: 100px ;}</style></head><body><div class="sel"><select id="sel1"></select><select id="sel2"></select><select id="sel3"></select><select id="sel4"></select><select id="sel5"></select></div><br /><div><input id="btnA" type="button" value="显示/不显示空值" /><input id="btnB" type="button" value="添加菜单" /><input id="btnC" type="button" value="减少菜单" /></div></body></html>
Tip: you can modify some code before running
