マルチレベル連携はコードを直接コピーすることで実行できます。バックエンドやデータベースを必要とせず、コード圧縮パッケージが下部に含まれています
。<br>
<br>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<br>
<title>JavaScript 自定义多级联动下拉菜单</title>
<br>
<script type="text/javascript">var $ = function(id) {<br />
<br />
return 「文字列」 == 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++) {<br />
fun(arrList[i], i);<br />
}<br />
<br />
};<br />
<br />
function GetOption(val, txt) {<br />
<br />
var op = document.createElement("オプション");<br />
<br />
op.value = val;<br />
op.innerHTML = txt;<br />
<br />
返品手続き<br />
<br />
};<br />
<br />
var クラス = {<br />
<br />
作成: function() {<br />
<br />
return 関数() {<br />
<br />
this.initialize.apply(this, arguments);<br />
<br />
}<br />
<br /> }<br />
<br />
}<br />
<br />
Object.extend = function(destination, source) {<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 />
初期化: function(arrSelects, arrMenu, options) {<br />
<br />
if (arrSelects.length <= 0 || arrMenu.length <= 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 />
Each(arrSelects,<br />
function(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 />
//設置默认プロパティ<br />SetOptions: function(options) {<br />
<br />
This.options = { //デフォルト値<br />
//デフォルト値(順番)<br />
ShowEmpty: false,<br />
// 空の値 (最初の値にある) を表示するかどうか <br />
EmptyText: "Please select" //空の値の表示テキスト (ShowEmpty が true の場合に有効)<br />
};<br />
<br />
Object.extend(this.options, options || {});<br />
<br />
}、<br />
<br />
リセット: function() {<br />
<br />
This.SetSelect(this.Selects[0], this.Menu, this.Default.shift());<br />
<br />
This.Set(0);<br />
<br />
}、<br />
<br />
設定する<br />
セット: function(index) {<br />
<br />
var menu = this.Menu<br />
<br />
//最初の選択は処理する必要がないため、1から始まります<br />
Len = this.selects.length;
<br />
If (menu.length > 0) {<br />
<br />
var value = this.Selects[i - 1].value;<br />
<br />
If (値 != "") {<br />
<br />
関数(o) {<br />
If (o.val == 値) {<br />メニュー = o.メニュー || [];<br />
}）;<br />
<br />
メニュー = [];<br />
}<br />
<br />
If (i > インデックス) {<br />
This.SetSelect(this.Selects[i], メニュー, this.Default.shift());<br />
}<br />
<br />
} それ以外の場合は {s
<br />
This.SetSelect(this.Selects[i], [], "");<br />
<br />
<br />
}<br />
<br />
This.Default.length = 0;<br />
<br />
}、<br />
<br />
//設定を選択<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 /> 戻ります;<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 />
for (var i = index,<br />
len = this.Menu.length - 1; 私は< レン。 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 メニュー = [<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, menu, {<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 />
'val': '5_1_1 ->',<br />
「メニュー」: [<br />
<br />
{<br />
'val': '5_1_1_1 ->',<br />
「メニュー」: [<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.削除(3)<br />
<br />
}<br />
<br />
}</script><br>
<style type="text/css">.sel select{ width:100px;}</style>
<br> <br>
<div class="sel">
<br>
<select id="sel1"></select><br>
<select id="sel2"></select><br>
<select id="sel3"></select><br>
<select id="sel4"></select><br>
<select id="sel5"></select><br>
</div>
<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="减少菜单">
</div>
<br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
