多級聯動
- WBOY原創
- 2016-09-02 08:42:181067瀏覽
多級連動 直接把程式碼複製就可以運作 純前段 不帶後端和資料庫 底部附帶程式碼壓縮包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 />
返回「字串」== id 類型？ document.getElementById(id) : id;<br />
<br />
};<br />
<br />
函數 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 />
} 所為另一個 {<br />
<br />
oTarget["on" + sEventType] = fnHandler;<br />
<br />
}<br />
<br />
};<br />
<br />
函數每個（arrList，有趣）{<br />
<br />
為（var i = 0，<br />
len = arrList.length; 我< 倫； 我++) {<br />
且有趣（arrList [i]，i）；<br />
}<br />
<br />
};<br />
<br />
函數 GetOption(val, txt) {<br />
<br />
var op = document.createElement("OPTION");<br />
<br />
op.value = val;<br />
op.innerHTML = txt;<br />
<br />
返回作業；<br />
<br />
};<br />
<br />
var 類別 = {<br />
<br />
已建立：函數（）{<br />
<br />
以連結函數(){<br />
<br />
this.initialize.apply(this, 參數);<br />
<br />
}<br />
<br /> }<br />
<br />
}<br />
<br />
Object.extend = 函數（目標，且來源）{<br />
<br />
for（源中的 var 屬性）{<br />
<br />
且為目的地[屬性] = 來源[屬性];<br />
<br />
}<br />
<br />
地返回目的地；<br />
<br />
}<br />
<br />
var CascadeSelect = Class.create();<br />
<br />
CascadeSelect.prototype = {<br />
<br />
//選擇集合，且選單物件<br />
初始化：函數（arrSelects、arrMenu、選項）{<br />
<br />
if (arrSelects.length <= 0 || arrMenu.lenght <= 0) return; //選單物件<br />|| arrMenu.lenght <= 0) return; //選單物件<br />||
<br />
var oThis = this;<br />
<br />
this.Selects = []; //選擇集合<br />
this.Menu = arrMenu; //選單對象<br />
<br />
this.SetOptions(選項);<br />
<br />
this.Default = this.options.Default || [];<br />
<br />
this.ShowEmpty = !!this.options.ShowEmpty;<br />
<br />
this.EmptyText = this.options.EmptyText.toString();<br />
<br />
//設定選擇以改變事件<br />
且為每個(arr選擇,<br />
函數（o，i）{<br />
<br />
addEventHandler((oThis.Selects[i] = $(o)), "改變",<br />
函數(){<br />
oThis.Set(i);<br />
});<br />
<br />
});<br />
<br />
this.ReSet();<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 />
//先使用且非處理於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].valuevar value = this.Selects[i 1].valueue;
<br />
if (value != "") {<br />
<br />
Each(menu,<br />
function(o) {<br />
}));<br />
<br />
} else {<br />
menu = [];<br />
}<br />
<br />
///設定選單<br />
if (i > index) {<br />
this.SetSelect(this.Selects[i], this.SetSelect(this.Selects[i],
}<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 />Child(GetOption("", this.EmptyText));<br />Child(GetOption("", this.EmptyText));<br />Child(GetOption("", this.EmptyText));<br />Child(GetOption("", this.EmptyText))；
}<br />
<br />
if (menu.length <= 0) {<br />
oSel.disabled = true;<br /> 且有回報；<br />
}<br />
<br />
且為每個（選單，且<br />
函數(o){<br />
<br />
var op = GetOption(o.val, o.txt?o.txt: o.val);<br />
op.selected=（值==op.value）；<br />
<br />
oSel.appendChild(op);<br />
<br />
});<br />
<br />
},<br />
<br />
//新增選單<br />
新增：功能（選單）{<br />
<br />
this.Menu[this.Menu.length] = 選單;<br />
<br />
this.ReSet();<br />
<br />
},<br />
<br />
//移除選單<br />
刪除：函數（指標）{<br />
<br />
if (index < 0 || index >= this.Menu.length) return;<br />
<br />
以（var i =索引，<br />
len = this.Menu.length - 1; 我< 倫； 我++) {<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選單=[<br />
<br />
{<br />
'val': '1',<br />
'txt』: '值'<br />
},<br />
<br />
{<br />
'val': '2 ->',<br /> 「以選單」：[<br />
<br />
{<br />
「val」：「2_1」<br />
},<br />
<br />
{<br />
'val': '2_2'<br />
}<br />
<br />
】<br />
},<br />
<br />
{<br />
'val': '3 ->',<br />
「以選單」：[<br />
<br />
{<br />
'val': '3_1 ->',<br />
「以選單」中：[<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 />
「以選單」：[<br />
<br />
{<br /> 'val': '4_1 ->',<br />
「以選單」中：[<br />
<br />
{<br />
'val': '4_1_1 ->',<br />
「選單」中：[<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, 選單, {<br />
預設值：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 />
「以選單」中：[<br />
<br />
{<br /> 'val': '5_1 ->',<br />
「選單」中：[<br />
<br />
{<br />
,
「且選單」中[<br />
<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。刪除(3)<br />
<br />
}<br />
<br />
}</用者><br />
<style type="text/css">.sel select{ width:100px;}<br /> <身體><br />
<div class="sel"><br />
<選擇 id="sel1"></選擇><br />
<選擇id=「sel2」></選擇><br />
<選擇 id="sel3"></選擇><br />
<選擇 id="sel4"></選擇><br />
<選擇 id="sel5"></選擇><br />
<br />
<br /><br />
<div><br />
<input id="btnA" type="button" value="顯示/不顯示空值" /><br />
<input id="btnB" type="button" value="新增選單" /><br />
<input id="btnC" type="button" value="減少選單" /><br />
</身體><br />
</script>