recherche

Maison  >  Article  >  php教程  >  多级联动

多级联动

WBOY
WBOYoriginal
2016-09-02 08:42:181088parcourir

多级联动 直接把代码复制就可以运行 纯前段 不带后端和数据库 底部附带代码压缩包
nbsp;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 = { //默认值<br /> Default: [],<br /> //默认值(按顺序)<br /> ShowEmpty: false,<br /> //是否显示空值(位于第一个)<br /> EmptyText: "请选择" //空值显示文本(ShowEmpty为true时有效)<br /> };<br /> <br /> Object.extend(this.options, options || {});<br /> <br /> },<br /> <br /> //初始化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 /> //全部select设置<br /> Set: function(index) {<br /> <br /> var menu = this.Menu<br /> <br /> //第一个select不需要处理所以从1开始<br /> for (var i = 1,<br /> len = this.Selects.length; i < len; i++) {<br /> <br /> if (menu.length > 0) {<br /> <br /> //获取菜单<br /> var value = this.Selects[i - 1].value;<br /> <br /> if (value != "") {<br /> <br /> Each(menu,<br /> function(o) {<br /> if (o.val == value) {<br /> menu = o.menu || [];<br /> }<br /> });<br /> <br /> } else {<br /> menu = [];<br /> }<br /> <br /> //设置菜单<br /> if (i > index) {<br /> this.SetSelect(this.Selects[i], menu, this.Default.shift());<br /> }<br /> <br /> } else {<br /> <br /> //没有数据<br /> this.SetSelect(this.Selects[i], [], "");<br /> <br /> }<br /> <br /> }<br /> <br /> //清空默认值<br /> this.Default.length = 0;<br /> <br /> },<br /> <br /> //select设置<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 /> &#039;val&#039;: &#039;1&#039;,<br /> &#039;txt&#039;: &#039;value&#039;<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;2 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;2_1&#039;<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;2_2&#039;<br /> }<br /> <br /> ]<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;3 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;3_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;3_1_1&#039;<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;3_1_2&#039;<br /> }<br /> <br /> ]<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;3_2&#039;<br /> }<br /> <br /> ]<br /> },<br /> <br /> {<br /> &#039;val&#039;: &#039;4 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;4_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;4_1_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;4_1_1_1&#039;<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 /> &#039;val&#039;: &#039;5 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;5_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;5_1_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;5_1_1_1 ->&#039;,<br /> &#039;menu&#039;: [<br /> <br /> {<br /> &#039;val&#039;: &#039;5_1_1_1_1&#039;<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>

附件 duoji.zip ( 2.33 KB 下载：1 次 )

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：thinkphp支持emoji , 并能存入mysqlArticle suivant：二级联动 三级联动 四级联动 多级联动

Articles Liés

Voir plus