Dynamically generate multilevel Select options with js+jsp implementation in the same Drop-down list

Js|select| News | dropdown | drop down list

After two days of bitter fighting, I finally got the js+jsp. In the same Drop-down box, dynamically generate multilevel select options without refreshing the page

First, determine the needs and the results to be achieved

The effect to achieve the following figure

[

]

In order to facilitate the debugging of you,
I've simplified the code, I've removed the data, and you can modify it to your own data.

Ii. description
The main techniques used in this design are listed below
1. Fill the data into the JS array dynamically
Use the following 3 words to achieve
Out.print ("<script>");
Out.print ("selprov[330000] = new Array" (New Option (', '), new option (' ... ', ' goup '), new option (' Hangzhou, ' 330100 '), new Option (' Ningbo ', ' 330200 '), New Option (' Wenzhou region ', ' 330300 '); ");
Out.print ("</script>");
Specific applications, you can use the loop, the data will continue to Out.print (", New Option (XXX,YYY)");

2.1. When the province is selected, fill in the area list with the area information
The main use of the following cycle
for (var i=0; i<selprov[hprov.value].length; i++) {
Harea.add (Selprov[hprov.value][i]);
}

2.2. When the region has been selected, the county and city information will be filled in the city list (the implementation of the method Ibid.)

4. With the implicit technique, 3 Select is placed in 3 <td></td> in the same row,
Then use the <TD style= "Display:none" > To hide, each 3 <td>, only one item is visible
such as: When the need for regional display, with the following JS statement
D2.style.display= "";
D1.style.display= "None";
D3.style.display= "None";

Third, the source code
<%@ page contenttype= "text/html; CHARSET=GBK "%>

<title>city</title>
<script language= "JavaScript" >
var Selprov = new Array ();
var selarea = new Array ();
</script>
<%
Out.print ("<script>");
Add locale data to each province's array
Out.print ("selprov[330000] = new Array" (New Option (', '), new option (' ... ', ' goup '), new option (' Hangzhou, ' 330100 '), new Option (' Ningbo ', ' 330200 '), New Option (' Wenzhou region ', ' 330300 '); ");
Out.print ("selprov[350000] = new Array" (New Option (', '), new option (' ... ', ' goup '), new option (' Fuzhou ', ' 350100 '), new Option (' Xiamen area ', ' 350200 '), New Option (' Quanzhou ', ' 350300 '); ");
Out.print ("</script>");

 out.print ("<script>");
 //adds county data to the array for each region of each province
 out.print ("selarea[330100] = new Array" (New Option (', '), new option (' ... ', '), ' Goup '), new option (' Hangzhou city ', ' 330101 '), new option (' Xiaoshan ', ' 330102 '), new option (' Yuhang ', ' 330102 ');
 out.print ("selarea[330200] = new Array (new option (', '), new option (' ... ', ' goup '), new option (' Ningbo ', ' 330201 ') ), new option (' Yuyao ', ' 330202 '), new option (' Fenghua ', ' 330203 ');
 out.print ("selarea[350100] = new Array (new option (', '), new option (' ... ', ' goup '), new option (' Fuzhou ', ' 350101 ') ), new option (' Fuqing ', ' 350102 '), new option (' Fu xx city ', ' 350102 '); ");
 out.print ("</script>");
%>
<script>

</script>
<script>
Function Prov_chg ()
{
 with (document.all) {
  if (hprov.value) {
   var ln = harea.options.length;
   while (ln--) {
    harea.options[ln] = null;
&NBSP;&NBSP;&NBSP}
   ln = hcity.options.length;
   while (ln--) {
    hcity.options[ln] = null;
&NBSP;&NBSP;&NBSP}
   for (var i=0; i<selprov[hprov.value].length; i++) {
     harea.add (Selprov[hprov.value][i]);
   }
  }
 }
 if (Document.form1.hprov.value!= "")
 {
  d2.style.display= "";
  d1.style.display= "None";
  d3.style.display= "None";
 }
 else {
 }
}

Function Area_chg ()
{
 if (Document.form1.harea.value = = "Goup")
 {
   Document.form1.hprov.value = "";
  d1.style.display= "";
  d2.style.display= "None";
  d3.style.display= "None";
 } else if (Document.form1.harea.value!= "")
 {
  d1.style.display= "None";
  d2.style.display= "None";
  d3.style.display= "";
 }
 with (document.all) {
  if (harea.value) {
   var ln = hcity.options.length;
   while (ln--) {
    hcity.options[ln] = null;
&NBSP;&NBSP;&NBSP}
   for (var i=0; i<selarea[harea.value].length; i++) {
     hcity.add (Selarea[harea.value][i]);
   }
  }
 }
}

function City_chg () {
if (Document.form1.hcity.value = = "Goup")
{
D1.style.display= "None";
D2.style.display= "";
D3.style.display= "None";
}
}

</script>
<body bgcolor= "#ffffff" >
<form name= "Form1" method= "Post" action= "./city.jsp" >
<table >
<tr> </tr>
<tr>
&LT;TD style= "Display:inline" id= "D1" > Province
<select id= "Hprov" >
<option value= "" ></option>
<%
Out.print ("<option value= ' 330000 ' > Zhejiang province </option>");
Out.print ("<option value= ' 350000 ' > Fujian Province </option>");
%>
</select> </td>
&LT;TD style= "Display:none" id= "D2" > Area
<select id= "Harea" >
<option value= "" ></option>
</select> </td>
&LT;TD style= "Display:none" id= "D3" > County city
<select id= "Hcity" >
<option value= "" ></option>
</select> </td>
</tr>

</table>
</form>
</body>