Html Code
Copy code The Code is as follows: <HTML>
<Head>
<Meta http-equiv = 'content-type' content = 'text/html; charset = UTF-8 '/>
<Title> try </title>
</Head>
<SCRIPT type = "text/JavaScript">
VaR DATA = {
'1': 'a001 ',
'2': 'a002 ',
'3': 'a003 ',
'4': 'a004 ',
'5': 'a005 ',
'6': 'a006'
};
VaR data2 = {
'1': {'000000': 'a101 ', '000000': 'a102', '000000': 'a103 ', '000000': 'a104 '},
'2': {'000000': 'a201 ', '000000': 'a202', '000000': 'a203 ', '000000': 'a204 '},
'3': {'000000': 'a301 ', '000000': 'a302', '000000': 'a303', '000000': 'a304 '},
'4': {'000000': 'a401', '000000': 'a402 ', '000000': 'a403', '000000': 'a404 '},
'5': {'000000': 'a501', '000000': 'a502', '000000': 'a503', '000000': 'a504 '},
'6': {'000000': 'a601', '000000': 'a602', '000000': 'a603', '000000': 'a604 '},
'000000': {'000000': 'a10101 ', '000000': 'a10102', '000000': 'a10103 ', '000000': 'a10104 '},
'20180101': {'2018010201': '2018010201', '2018010202': 'a10203 ', '2018010202': 'a10204 '},
'000000': {'000000': 'a10301 ', '000000': 'a10302', '000000': 'a10303 ', '000000': 'a10304 '},
'000000': {'000000': 'a10401 ', '000000': 'a10402', '000000': 'a10403 ', '000000': 'a10404 '},
'20180101': {'20180101': 'a20101', '20180101': 'a20102', '20180101': 'a20103', '20180101': 'a20104 '},
'2020202020201 ', '20202020202020202020202', '202020202020203 ', '20202020204': 'a20204 '},
'20140901': {'20302': 'a20301 ', '20302': '20302', '20303': 'a20303', '20303': 'a20304 '},
'000000': {'000000': 'a20401 ', '000000': 'a20402', '000000': 'a20403 ', '000000': 'a20404 '},
'000000': {'000000': 'a30101 ', '000000': 'a30102', '000000': 'a30103 ', '000000': 'a30104 '},
'000000': {'000000': 'a30201 ', '000000': 'a30202', '000000': 'a30203', '000000': 'a30204 '},
'000000': {'000000': 'a30301 ', '000000': 'a30302', '000000': 'a30303', '000000': 'a30304 '},
'000000': {'000000': 'a30401 ', '000000': 'a30402', '000000': 'a30403 ', '000000': 'a30404 '},
'000000': {'000000': 'a40101 ', '000000': 'a40102', '000000': 'a40103 ', '000000': 'a40104 '},
'000000': {'000000': 'a40201 ', '000000': 'a40202', '000000': 'a40203 ', '000000': 'a40204 '},
'000000': {'000000': 'a40301 ', '000000': 'a40302', '000000': 'a40303', '000000': 'a40304 '},
'000000': {'000000': 'a40401 ', '000000': 'a40402', '000000': 'a40403 ', '000000': 'a40404 '},
'000000': {'000000': 'a50101 ', '000000': 'a50102', '000000': 'a50103 ', '000000': 'a50104 '},
'000000': {'000000': 'a50201 ', '000000': 'a50202', '000000': 'a50203 ', '000000': 'a50204 '},
'000000': {'000000': 'a50301 ', '000000': 'a50302', '000000': 'a50303', '000000': 'a50304 '},
'000000': {'000000': 'a50401 ', '000000': 'a50402', '000000': 'a50403 ', '000000': 'a50404 '},
'000000': {'000000': 'a60101 ', '000000': 'a60102', '000000': 'a60103 ', '000000': 'a60104 '},
'000000': {'000000': 'a60201 ', '000000': 'a60202', '000000': 'a60203', '000000': 'a60204 '},
'000000': {'000000': 'a60301 ', '000000': 'a60302', '000000': 'a60303 ', '000000': 'a60304 '},
'000000': {'000000': 'a60401 ', '000000': 'a60402', '000000': 'a60403 ', '000000': 'a60404 '}
};
Window. $ = function (ID ){
If (typeof id = 'string '){
Return document. getelementbyid (ID );
}
Return ID;
}
/**
* Event processing tool
*
* @ Author bao110908
*/
VaR event = function (){}
Event = {
/**
* Handler is used for Element Processing. Program Add to event
* Compatible with IE, Firefox, and other browsers
*
* For example, to add an onclick event to a botton object, use clickevent
* Method as a handler:
* Event. addevent (botton, 'click', clickevent );
*
* @ Param element the object of the event to be added)
* @ Param event the name of the event to be added (string) without "on"
* @ Param handler the method reference (function) to be added)
*/
Addevent: function (element, event, Handler ){
If (element. attachevent ){
Element. attachevent ('on' + event, Handler );
} Else if (element. addeventlistener ){
Element. addeventlistener (event, handler, false );
} Else {
Element ['on' + event] = handler;
}
},
/**
* When an event handler is added, only one method reference can be added.
* Add parameters to the method. For example, the clickevent (STR) method is defined.
* To use it as the event handler of The onclick object, you can use:
* Obj. onclick = event. getfuntion (null, clickevent, STR );
*/
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
*
* @ Author bao110908
*/
VaR linkage = function (first, second ){
This. First = $ (first );
This. Second = $ (second );
}
/**
* Initialize the data of the first select statement.
*/
Linkage. initfirst = function (first, dataset ){
VaR base = $ (first );
Base. Options. Length = 1;
For (var k in dataset ){
VaR opt = New Option (Dataset [K], k );
Base. Options [base. Options. Length] = OPT;
}
}
Linkage. Prototype = {
// Initialization
Init: function (){
This. addonchange ();
},
// Add an onchange event for the first select statement
Addonchange: function (){
Event. addevent (this. First, 'change', event. getfunction (this, this. _ onchangeevent ));
},
// Onchange event processing
_ Onchangeevent: function (){
This. _ defaselect select ();
VaR DATA = This. _ getdata (this. First. value );
If (! Data ){
Return;
}
This. Second. Options. Length = 1;
For (var k in data ){
VaR opt = New Option (data [K], k );
This. Second. Options [This. Second. Options. Length] = OPT;
}
},
// Obtain data. If Ajax is used, you need to modify the data.
// Ajax should return a data format such as {'20170101': {'20160101': 'a101 ', '20170101', 'a102 '}.
// Use eval ('+ ajaxdata +') to convert it to a JSON object.
_ Getdata: function (value ){
Return data2 [value];
},
// Processing when reselect
_ Defaultselect: function (){
This. Second. selectedindex = 0;
This. Second. Options. Length = 1;
If (this. Second. fireevent ){
// IE
This. Second. fireevent ('onchange ');
} Else {
// Dom 2
VaR event = Document. createevent ('htmlevents ');
Event. initevent ('change', false, true );
This. Second. dispatchevent (event );
}
}
}
Window. onload = function (){
Linkage. initfirst ('base1', data );
VaR one = new linkage ('base1', 'base2 ');
One. INIT ();
VaR two = new linkage ('base2', 'base3 ');
Two. INIT ();
}
</SCRIPT>
<Style type = "text/CSS">
*{
Font-size: 12px;
Font-family: "Courier New ";
}
Select {
Width: 120px;
}
</Style>
<Body>
Level 1: <select name = "base1" id = "base1"> <option value = "0"> -- select -- </option> </SELECT>
Level 2: <select name = "base2" id = "base2"> <option value = "0"> -- select -- </option> </SELECT>
Level 3: <select name = "base3" id = "base3"> <option value = "0"> -- select -- </option> </SELECT>
</Body>
</Html>
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 ();
// each time a level of association is added, you need to create a new one.
