Home > front end >  Js three-level linkage, how to express the third drop-down box
Js three-level linkage, how to express the third drop-down box

Time:12-03

 




<meta charset="utf-8" & gt;
Insert the title here


Var arr_cs=[" please select a province/city ", "Beijing", "Shanghai", "tianjin", "chongqing", "shenzhen", "guangdong province"].

Var arr_dq=[
[" please choose the city/region "],
[" dongcheng district ", "xicheng district", "chaoyang"],
[' baoshan district ', 'district', 'FengXian area],
[' heping district, hexi district, 'nankai district],
Central [' yu ', 'nanan distract', 'jiangbei],
[' * ', 'the luohu district', 'yantian district],
Huizhou, guangzhou [' ', 'a', 'shantou']
];

Var arr_cz=[
"Please select a region/town",
[dongcheng "1", "east side 2", "three dongcheng"],
[" wl 1 ", "west side 2", "west side 3"],
[' chaoyang 1 ', 'chaoyang 2', 'chaoyang 3'],
[' baoshan 1 ', 'baoshan 2', 'baoshan 3'],
[' changning 1 ', 'changning 2', 'changning 3'],
FengXian FengXian [' 1 ', '2', 'FengXian 3'],
Peace peace [' 1 ', '2', '3' peace],
[' hexi 1 ', 'the hexi 2', 'the hexi 3'],
[' nankai 1 ', 'nankai 2', 'nankai 3'],
[' 1 'in the shu,' 2 'in the shu,' 3 'in the shu],
South south [' 1 ', '2', 'on the 3'],
[' jiangbei 1 ', '2' in the north of the, '3' in the north of the],
[', 1 ', ', 2 ', ', 3 '],
[' lo wu 1 ', 'lo wu 2', 'lo wu 3'],
Yantian [' 1 ', 'yantian 2', 'yantian 3'],
Guangzhou guangzhou [' 1 ', '2', '3' guangzhou],
[' huizhou 1 ', '2' in huizhou, huizhou '3'],
Shantou shantou [' 1 ', '2', 'shantou 3]
];







Window. The onl oad=init;
The function the init () {
//to get object
Var cs=document. Form1. Cs;
Var dq=document. Form1. Dq;
Var cz=document. Form1. Cz;

//specified in the provinces and regions & lt; Option> The number of tag
Cs. Length=arr_cs. Length;
Dq. Length=arr_dq. Length;

//loop will in the array data to provinces and regions & lt; Option> The tag
for(var i=0; iCs. The options [I]. Text=arr_cs [I];
Cs. The options [I] value=https://bbs.csdn.net/topics/arr_cs [I];
}
For (var i2=0; I2 & lt; Dq. Length; I2 + +) {
Dq. Options [i2]. Text=arr_dq [i2];
Dq. Options [i2] value=https://bbs.csdn.net/topics/arr_dq [i2];
}


//modify provinces and regions list default options
Var index=0;
Cs. SelectedIndex=index;
Dq. SelectedIndex=index;

//in the designated areas and towns & lt; Option> The number of
Dq. Length=arr_dq [index]. Length;
Cz. Length=arr_cz [index]. Length;

//data to areas of the circular array and town & lt; Option> The tag
For (var j=0; jDq. Options [j]. Journal of text=arr_dq [index] [j];
Dq. Options [j]. Journal of value=https://bbs.csdn.net/topics/arr_dq [index] [j];
}
For (var j2=0; J2 & lt; Arr_cz [index]. Length; J2 + +) {
Cz. Options [j2]. Text=arr_cz [index] [j2];
Cz. Options [j2] value=https://bbs.csdn.net/topics/arr_cz [index] [j2];
}
}

The function ejld (index) {
//select object
Var dq=document. Form1. Dq;

The options/modify/province list
Cs. SelectedIndex=index;

//in the designated area & lt; Option> The number of tag
Dq. Length=arr_dq [index]. Length;

//to write data in a circular array into the areas and towns & lt; Option> The tag
For (var j=0; jDq. Options [j]. Journal of text=arr_dq [index] [j];
Dq. Options [j]. Journal of value=https://bbs.csdn.net/topics/arr_dq [index] [j];
}
}

The function SJLD (index) {
//select object
Var cz=document. Form1. Cz;

//modify region the options list
Dq. SelectedIndex=index;

//specified in the town & lt; Option> The number of tag
Cz. Length=arr_cz [index]. Length;

//to write data in a circular array into the town & lt; Option> The tag
For (var j2=0; J2 & lt; Arr_cz [index]. Length; J2 + +) {
Alert (arr_cz [index] [j2]);
Cz. Options [j2]. Text=arr_cz [index] [j2];
Cz. Options [j2] value=https://bbs.csdn.net/topics/arr_cz [index] [j2];
}
}

</script>
<body>
Provinces: & lt; Select the name="cs" id="cs" onchange="ejld (enclosing selectedIndex)" & gt;
Region: & lt; Select the name="dq" id="dq" onchange="SJLD (enclosing selectedIndex)" & gt;
Town: & lt; Select the name="cz" id="cz" & gt;





CodePudding user response:

Use object


 



<meta charset="utf-8"/& gt;
Insert the title here

Var arr_cs=[
"Please select a province/city,"
"Beijing",
"Shanghai",
"Tianjin",
"In chongqing,"
"Shenzhen",
"Guangdong province",
];

Var arr_dq=[
[" please choose the city/region "],
[" dongcheng district ", "xicheng district", "chaoyang"],
[" baoshan district changning district ", ""," FengXian area "],
[" peace ", "" hexi district", "" nankai district],
Midtown [" shu ", "nanan distract", "jiangbei"],
[" futian district ", "luohu district", "" yantian district],
[" guangzhou ", "huizhou", "shantou"],
];

Var arr_cz=[
"Please select a region/town",
[dongcheng "1", "east side 2", "three dongcheng"],
[" wl 1 ", "west side 2", "west side 3"],
[" chaoyang 1 ", "chaoyang 2", "3" chaoyang],
[" baoshan 1 ", "baoshan 2", "3" baoshan],
[" changning 1 ", "changning 2", "changning 3]",
FengXian [FengXian "1", "2", "FengXian 3]",
[" 1 "peace, peace" 2 ", "peace march"],
[" hexi 1 ", "hexi 2", "hexi 3]",
[" nankai 1 ", "nankai 2", "3" nankai],
[" 1 "in the shu," yu in 2 ", "3" in the shu],
South [" 1 ", "south 2", "3" south],
[" jiangbei 1 ", "jiangbei 2", "3" in the north of the],
[" fukuda 1 ", "Mr Fukuda 2", "fukuda 3]",
[" lo wu 1 ", "lo wu 2", "3" lo wu],
[" yantian 1 ", "yantian 2", "yantian 3]",
Guangzhou [guangzhou "1", "2", "3" in guangzhou],
[huizhou "1", "huizhou 2", "huizhou 3]",
Shantou shantou [" 1 ", "2", "shantou 3]",
];

//use the first two words of the same characteristics had a dictionary
Const obj_cz={};
Arr_cz. ForEach ((arr)=& gt; {
Obj_cz [arr [0]. Slice (0, 2)]=arr;
});
The console. The log (obj_cz);

Window. The onl oad=init;
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull
  • Related