Home > Developer > JavaScript
Html code
Copy codeThe 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 = {
/**
* Add an element to an event using a handler
* 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 );
*/
GetFunction: function (obj, fun ){
Var args = [];
Obj = obj | window;
For (var I = 2; I <arguments. length; I ++ ){
Args. push (arguments [I]);
}
Return function (){
Fun. apply (obj, args );
};
}
}
/**
* Linkage Processing
*
* @ Param first the ID of the first select
* @ Param second the ID of the second select
* @ Param dataSet data of the second select statement
*
* @ 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 codeThe 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-1 linkage is added, it is necessary to create a new one.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
