Home > php教程 > php手册 > Multi-level linkage

Multi-level linkage

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-09-02 08:42:18
Original
1163 people have browsed it

Multi-level linkage can be run by directly copying the code. Pure front-end without back-end and database. The code compression package is included at the bottom
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <br>     <br>         <meta> <br>         <title>JavaScript 自定义多级联动下拉菜单</title> <br>         <script>var $ = function(id) {<br /> <br />                 return "string" == typeof id ? document.getElementById(id) : id;<br /> <br />             };<br /> <br />             function addEventHandler(oTarget, sEventType, fnHandler) {<br /> <br />                 if (oTarget.addEventListener) {<br /> <br />                     oTarget.addEventListener(sEventType, fnHandler, false);<br /> <br />                 } else if (oTarget.attachEvent) {<br /> <br />                     oTarget.attachEvent("on" + sEventType, fnHandler);<br /> <br />                 } else {<br /> <br />                     oTarget["on" + sEventType] = fnHandler;<br /> <br />                 }<br /> <br />             };<br /> <br />             function Each(arrList, fun) {<br /> <br />                 for (var i = 0,<br />                 len = arrList.length; i < len; i++) {<br />                     fun(arrList[i], i);<br />                 }<br /> <br />             };<br /> <br />             function GetOption(val, txt) {<br /> <br />                 var op = document.createElement("OPTION");<br /> <br />                 op.value = val;<br />                 op.innerHTML = txt;<br /> <br />                 return op;<br /> <br />             };<br /> <br />             var Class = {<br /> <br />                 create: function() {<br /> <br />                     return function() {<br /> <br />                         this.initialize.apply(this, arguments);<br /> <br />                     }<br /> <br />                }<br /> <br />             }<br /> <br />             Object.extend = function(destination, source) {<br /> <br />                 for (var property in source) {<br /> <br />                     destination[property] = source[property];<br /> <br />                 }<br /> <br />                 return destination;<br /> <br />             }<br /> <br />             var CascadeSelect = Class.create();<br /> <br />             CascadeSelect.prototype = {<br /> <br />                 //select集合,菜单对象<br />                 initialize: function(arrSelects, arrMenu, options) {<br /> <br />                     if (arrSelects.length <= 0 || arrMenu.lenght <= 0) return; //菜单对象<br /> <br />                     var oThis = this;<br /> <br />                     this.Selects = []; //select集合<br />                     this.Menu = arrMenu; //菜单对象<br /> <br />                     this.SetOptions(options);<br /> <br />                     this.Default = this.options.Default || [];<br /> <br />                     this.ShowEmpty = !!this.options.ShowEmpty;<br /> <br />                     this.EmptyText = this.options.EmptyText.toString();<br /> <br />                     //设置Selects集合和change事件<br />                     Each(arrSelects,<br />                     function(o, i) {<br /> <br />                         addEventHandler((oThis.Selects[i] = $(o)), "change",<br />                         function() {<br />                             oThis.Set(i);<br />                         });<br /> <br />                     });<br /> <br />                     this.ReSet();<br /> <br />                 },<br /> <br />                 //设置默认属性<br />                  SetOptions: function(options) {<br /> <br /> This.options = { //Default value<br />                             Default: [],<br /> //Default value (in order)<br />                          ShowEmpty: false,<br /> // Whether to display the empty value (located in the first one) <br /> EmptyText: "Please select" //Empty value display text (valid when ShowEmpty is true)<br />                    };<br /> <br />                     Object.extend(this.options, options || {});<br /> <br />                 },<br /> <br />                                   //Initialize select<br /> ReSet: function() {<br /> <br /> This.SetSelect(this.Selects[0], this.Menu, this.Default.shift());<br /> <br /> This.Set(0);<br /> <br />                 },<br /> <br />                                                                                                                                                                                                                                                                                      Set: function(index) {<br /> <br />                     var menu = this.Menu<br /> <br /> //The first select does not need to be processed, so it starts from 1<br />                                                                                                                                                                                                                     Len = this.selects.length; i & lt; len; I ++) {<br /> <br /> If (menu.length > 0) {<br /> <br />                                                                                                                                                                                                             var value = this.Selects[i - 1].value;<br /> <br /> If (value != "") {<br /> <br />                                                                                       function(o) {<br /> If (o.val == value) {<br />menu = o.menu || [];<br />                                                                                                                                                                                                                                                                                                                        });<br /> <br />                                                                                      menu = [];<br />                                                                                                                                                                                                                   }<br /> <br />                                                                                                                                         If (i > index) {<br /> This.SetSelect(this.Selects[i], menu, this.Default.shift());<br />                                                                                                                                                                                                                   }<br /> <br /> } Else {s <br />                                                                                                                                    This.SetSelect(this.Selects[i], [], "");<br /> <br />                                                                   <br />                     }<br /> <br />                                                                                                                                                                            This.Default.length = 0;<br /> <br />                 },<br /> <br />                                   //select settings<br />                   SetSelect: function(oSel, menu, value) {<br /> <br /> oSel.options.length = 0;<br /> oSel.disabled = false;<br /> <br /> If (this.ShowEmpty) {<br />                         oSel.appendChild(GetOption("", this.EmptyText));<br />                     }<br /> <br /> If (menu.length <= 0) {<br /> oSel.disabled = true;<br />                        return;<br />                     }<br /> <br />                     Each(menu,<br />                     function(o) {<br /> <br />                         var op = GetOption(o.val, o.txt ? o.txt: o.val);<br />                         op.selected = (value == op.value);<br /> <br />                         oSel.appendChild(op);<br /> <br />                     });<br /> <br />                 },<br /> <br />                 //添加菜单<br />                 Add: function(menu) {<br /> <br />                     this.Menu[this.Menu.length] = menu;<br /> <br />                     this.ReSet();<br /> <br />                 },<br /> <br />                 //删除菜单<br />                 Delete: function(index) {<br /> <br />                     if (index < 0 || index >= this.Menu.length) return;<br /> <br />                     for (var i = index,<br />                     len = this.Menu.length - 1; i < len; i++) {<br />                         this.Menu[i] = this.Menu[i + 1];<br />                     }<br /> <br />                     this.Menu.pop()<br /> <br />                     this.ReSet();<br /> <br />                 }<br /> <br />             };<br /> <br />             window.onload = function() {<br /> <br />                 var menu = [<br /> <br />                 {<br />                     'val': '1',<br />                     'txt': 'value'<br />                 },<br /> <br />                 {<br />                     'val': '2 ->',<br />                    'menu': [<br /> <br />                     {<br />                         'val': '2_1'<br />                     },<br /> <br />                     {<br />                         'val': '2_2'<br />                     }<br /> <br />                     ]<br />                 },<br /> <br />                 {<br />                     'val': '3 ->',<br />                     'menu': [<br /> <br />                     {<br />                         'val': '3_1 ->',<br />                         'menu': [<br /> <br />                         {<br />                             'val': '3_1_1'<br />                         },<br /> <br />                         {<br />                             'val': '3_1_2'<br />                         }<br /> <br />                         ]<br />                     },<br /> <br />                     {<br />                         'val': '3_2'<br />                     }<br /> <br />                     ]<br />                 },<br /> <br />                 {<br />                     'val': '4 ->',<br />                     'menu': [<br /> <br />                     {<br />                        'val': '4_1 ->',<br />                         'menu': [<br /> <br />                         {<br />                             'val': '4_1_1 ->',<br />                             'menu': [<br /> <br />                             {<br />                                 'val': '4_1_1_1'<br />                             }<br /> <br />                             ]<br />                         }<br /> <br />                         ]<br />                     }<br /> <br />                     ]<br />                 }<br /> <br />                 ];<br /> <br />                 var sel = ["sel1", "sel2", "sel3", "sel4", "sel5"];<br /> <br />                 var val = ["3 ->", "3_1 ->", "3_1_2"];<br /> <br />                 var cs = new CascadeSelect(sel, menu, {<br />                     Default: val<br />                 });<br /> <br />                 $("btnA").onclick = function() {<br />                     cs.ShowEmpty = !cs.ShowEmpty;<br />                 }<br /> <br />                 $("btnB").onclick = function() {<br /> <br />                     cs.Add(<br /> <br />                     {<br />                         'val': '5 ->',<br />                         'menu': [<br /> <br />                         {<br />                            'val': '5_1 ->',<br />                             'menu': [<br /> <br />                             {<br />                                 'val': '5_1_1 ->',<br />                                 'menu': [<br /> <br />                                 {<br />                                     'val': '5_1_1_1 ->',<br />                                     'menu': [<br /> <br />                                     {<br />                                         'val': '5_1_1_1_1'<br />                                     }<br /> <br />                                     ]<br />                                 }<br /> <br />                                 ]<br />                             }<br /> <br />                             ]<br />                         }<br /> <br />                         ]<br />                     }<br /> <br />                     )<br /> <br />                 }<br /> <br />                 $("btnC").onclick = function() {<br /> <br />                     cs.Delete(3)<br /> <br />                 }<br /> <br />             }</script><br>         <style>.sel select{ width:100px;}</style> <br>    <br>         <div> <br>             <select></select><br>             <select></select><br>             <select></select><br>             <select></select><br>             <select></select><br>         </div> <br>         <br><br>         <div> <br>             <input><br>             <input><br>             <input> </div> <br>     <br>

Multi-level linkage duoji.zip ( 2.33 KB 下载:1 次 )

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template