html コード コードをコピー コードは次のとおりです: ; 试试 <br>var data = { <br>'1' : 'a001', <br>'2' : 'a002', <br>'3' : 'a003', <br>'4' : 'a004' , <br>'5' : 'a005', <br>'6' : 'a006' <br>}; <br>var data2 = { <br>'1' : { '101' : 'a101', '102' : 'a102', '103' : 'a103', '104' : 'a104' }, <br>'2' : { '201' : 'a201', '202' : 'a202', '203' : 'a203', '204' : 'a204' }, <br>'3' : { '301' : 'a301', '302' : 'a302', '303' : 'a303', '304' : 'a304' }, <br>'4' : { '401' : 'a401', '402' : 'a402', '403' : 'a403', '404' : 'a404' }, <br>'5' : { '501' : 'a501', '502' : 'a502', '503' : ' a503', '504' : 'a504' }, <br>'6' : { '601' : 'a601', '602' : 'a602', '603' : 'a603', '604' : 'a604 ' }, <br>'101' : { '10101' : 'a10101', '10102' : 'a10102', '10103' : 'a10103', '10104' : 'a10104' }, <br>'102' : { '10201' : 'a10201', '10202' : 'a10202', '10203' : 'a10203', '10204' : 'a10204' }, <br>'103' : { '10301' : 'a10301' , '10302' : 'a10302', '10303' : 'a10303', '10304' : 'a10304' }, <br>'104' : { '10401' : 'a10401', '10402' : 'a10402', '10403' : 'a10403', '10404' : 'a10404' }, <br>'201' : { '20101' : 'a20101', '20102' : 'a20102', '20103' : 'a20103', ' 20104' : 'a20104' }, <br>'202' : { '20201' : 'a20201', '20202' : 'a20202', '20203' : 'a20203', '20204' : 'a20204' }, <br>'203' : { '20301' : 'a20301', '20302' : 'a20302', '20303' : 'a20303', '20304' : 'a20304' }, <br>'204' : { '20401 ' : 'a20401', '20402' : 'a20402', '20403' : 'a20403', '20404' : 'a20404' }, <br>'301' : { '30101' : 'a30101', '30102' : 'a30102', '30103' : 'a30103', '30104' : 'a30104' }, <br>'302' : { '30201' : 'a30201', '30202' : 'a30202', '30203' : 'a30203', '30204' : 'a30204' }, <br>'303' : { '30301' : 'a30301', '30302' : 'a30302', '30303' : 'a30303', '30304' : ' a30304' }, <br>'304' : { '30401' : 'a30401', '30402' : 'a30402', '30403' : 'a30403', '30404' : 'a30404' }, <br>'401 ' : { '40101' : 'a40101', '40102' : 'a40102', '40103' : 'a40103', '40104' : 'a40104' }, <br>'402' : { '40201' : 'a40201 ', '40202' : 'a40202', '40203' : 'a40203', '40204' : 'a40204' }, <br>'403' : { '40301' : 'a40301', '40302' : 'a40302' , '40303' : 'a40303', '40304' : 'a40304' }, <br>'404' : { '40401' : 'a40401', '40402' : 'a40402', '40403' : 'a40403', '40404' : 'a40404' }, <br>'501' : { '50101' : 'a50101', '50102' : 'a50102', '50103' : 'a50103', '50104' : 'a50104' }, <br>'502' : { '50201' : 'a50201', '50202' : 'a50202', '50203' : 'a50203', '50204' : 'a50204' }, <br>'503' : { ' 50301' : 'a50301', '50302' : 'a50302', '50303' : 'a50303', '50304' : 'a50304' }, <br>'504' : { '50401' : 'a50401', '50402 ' : 'a50402', '50403' : 'a50403', '50404' : 'a50404' }, <br>'601' : { '60101' : 'a60101', '60102' : 'a60102', '60103' : 'a60103', '60104' : 'a60104' }, <br>'602' : { '60201' : 'a60201', '60202' : 'a60202', '60203' : 'a60203', '60204' : 'a60204' }, <br>'603' : { '60301' : 'a60301', '60302' : 'a60302', '60303' : 'a60303', '60304' : 'a60304' }, <br>' 604' : { '60401' : 'a60401', '60402' : 'a60402', '60403' : 'a60403', '60404' : 'a60404' } <br>}; <br>window.$ = function(id) { <br>if(typeof id == 'string') { <br>return document.getElementById(id); <br>} <br>ID を返します。 <br>} <br>/**<br>* イベント処理ツール クラス <br>* <br>* @author bao110908 <br>*/ <br>var Event = function(){} <br>Event = { <br>/**<br>* イベントに追加する要素にはハンドラー handler を使用します <br>* IE や Firefox などのブラウザと互換性があります <br>* <br>* たとえば、ボタン オブジェクトに onclick イベントを追加するには、clickEvent を使用します <br>*処理プログラムとしてのメソッド: <br>* Event.addEvent(botton, 'click', clickEvent); <br>* <br>* @param 要素 追加する必要があるイベントのオブジェクト (Object) <br>* @paramevent 追加するイベント名 (文字列)、on なし <br>* 追加する @param ハンドラー メソッドの参照 (関数) <br>*/ <br>addEvent : function(要素、イベント、ハンドラー) { <br>if(element.attachEvent) { <br>element.attachEvent('on' イベント、ハンドラー); <br>} else if (element.addEventListener) { <br>element.addEventListener(event, handler, false); <br>} else { <br>要素['on' イベント] = ハンドラー; <br>} <br>}, <br>/** <br>* イベント処理手順を追加する場合、メソッドの参照を追加することのみが可能で、<br>* メソッドの追加パラメーターを追加することはできません。For example, if you define the clickEvent(str) method, and now <br>* want to use it as the onclick event handler of obj, you can use: <br>* obj.onclick = Event.getFuntion(null, clickEvent, str) ; <br>*/ <br>getFunction : function(obj, fun) { <br>var args = []; <br>obj = obj || window; <br>for(var i = 2; i < arguments.length; i ) { <BR>args.push(arguments[i]); <BR>} <BR>return function() { <BR>fun.apply(obj, args); <BR>}; <BR>} <BR>} <BR>/**<BR>* Linkage processing class<BR>* <BR>* @param first The ID of the first select <BR>* @param second The ID of the second select <BR>* @param dataSet The data of the second select <BR>* <BR>* @author bao110908 <BR>*/ <BR>var Linkage = function(first, second) { <BR>this.first = $(first); <BR>this.second = $(second); <BR>} <BR>/**<BR>* Initialize the data of the first select <BR>*/ <BR>Linkage.initFirst = function(first, dataSet) { <BR>var base = $(first); <BR>base. options.length = 1; <BR>for(var k in dataSet) { <BR>var opt = new Option(dataSet[k], k); <BR>base.options[base.options.length] = opt; <BR>} <BR>} <BR>Linkage.prototype = { <BR>// Initialization<BR>init : function() { <BR>this.addOnChange(); <BR>}, <BR>// Add onchange event for the first select <BR>addOnChange: function() { <BR>Event.addEvent(this.first, 'change', Event.getFunction(this, this._onChangeEvent)); <BR>}, <BR>// onchange event handling <BR>_onChangeEvent: function() { <BR>this._defaultSelect(); <BR>var data = this._getData(this.first.value); <BR>if(!data) { <BR>return; <BR>} <BR>this.second.options.length = 1; <BR>for(var k in data) { <BR>var opt = new Option(data[k], k) ; <BR>this.second.options[this.second.options.length] = opt; <BR>} <BR>}, <BR>// Get data, if using Ajax, you need to change it <BR>/ / Ajax should return { '101' : {'101' : 'a101', '102', 'a102' }} such data format <BR>// Then use eval('(' ajaxData ')'); Convert to JSON object <BR>_getData : function(value) { <BR>return data2[value]; <BR>}, <BR>// Processing when reselecting <BR>_defaultSelect : function() { <BR> this.second.selectedIndex = 0; <BR>this.second.options.length = 1; <BR>if(this.second.fireEvent) { <BR>// IE <BR>this.second.fireEvent('onchange '); <BR>} else { <BR>// DOM 2 <BR>var event = document.createEvent('HTMLEvents'); <BR>event.initEvent('change', false, true); <BR> this.second.dispatchEvent(event); <BR>} <BR>} <BR>} <BR>window.onload = function() { <BR>Linkage.initFirst('base1', data); <BR>var one = new Linkage('base1', 'base2'); <BR>one.init(); <BR>var two = new Linkage('base2', 'base3'); <BR>two.init(); <BR>} <BR> <br>* { <br>font-size: 12px; <br>font-family: "courier new"; <br>} <br>select { <br>width: 120px; <br>} <br> Level 1: -- Please select-- Level 2: -- Please select-- Level 3:-- Please select-- Js code Copy code The code is as follows: var one = new Linkage('base1', 'base2', data2); one.init(); var two = new Linkage('base2', 'base3', data3); two .init(); //For each additional level of linkage, just use new
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
