用js+jsp实现在同一个下拉列表中,动态生成多级select选项

作者:网络 来源:佚名 更新时间:2008-02-08 23:41:21 点击:
 

经过两天苦战,总算用js+jsp搞定在同一个下拉框中,在不刷新页面的情况下,动态生成多级select选项

一、先确定需求及要达到的效果

要达到的效果如下图

[

]

为了便于各位的调试,
我将代码进行了简化,取数据部分我去掉了,各位可修改成自己用的数据

二、说明
现将该设计中,用到的主要技巧列在下面
1。将数据动态填入js的数组
用如下3句话实现
out.print("<script>");
out.print("selprov[330000] = new array(new option('',''), new option('..','goup'), new option('杭州地区','330100'), new option('宁波地区','330200'), new option('温州地区','330300'));");
out.print("</script>");
具体应用时,可以用循环,将数据不断的 out.print(", new option(xxx,yyy)");添加进去

2.1。当选择了省份后,将地区信息填入地区列表
主要用了下面这个循环
for(var i=0; i<selprov[hprov.value].length; i++){
 harea.add(selprov[hprov.value][i]);
}

2.2。当选择了地区后,将县市信息填入城市列表(实现方法同上)

4。用了隐含技巧,将3个select放入在同一行中的3个<td></td>中,
然后用<td >进行隐藏,每次3个<td>中,只有一项是可见的
如:当需要地区显示时,用如下js语句
d2.style.display="";
d1.style.display="none";
d3.style.display="none";


三、源代码
<%@ page contenttype="text/html; charset=gbk" %>

<html>
<head>
<title>city</title>
<script language="javascript">
var selprov = new array();
var selarea = new array();
</script>
<%
 out.print("<script>");
 //对每个省的数组添加地区数据
 out.print("selprov[330000] = new array(new option('',''), new option('..','goup'), new option('杭州地区','330100'), new option('宁波地区','330200'), new option('温州地区','330300'));");
 out.print("selprov[350000] = new array(new option('',''), new option('..','goup'), new option('福州地区','350100'), new option('厦门地区','350200'), new option('泉州地区','350300'));");
 out.print("</script>");

 out.print("<script>");
 //对每个省每个地区的数组添加县市数据
 out.print("selarea[330100] = new array(new option('',''), new option('..','goup'), new option('杭州市','330101'), new option('萧山市','330102'), new option('余杭市','330102'));");
 out.print("selarea[330200] = new array(new option('',''), new option('..','goup'), new option('宁波市','330201'), new option('余姚市','330202'), new option('奉化市','330203'));");
 out.print("selarea[350100] = new array(new option('',''), new option('..','goup'), new option('福州市','350101'), new option('福清市','350102'), new option('福xx市','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;
   }
   ln = hcity.options.length;
   while(ln--) {
    hcity.options[ln] = null;
   }
   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;
   }
   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>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post" action="./city.jsp">
  <table >
    <tr> </tr>
    <tr>
      <td id="d1"> 省份
        <select  id="hprov" onchange="javascipt:prov_chg();" >
          <option value=""></option>
<%
 out.print("<option value='330000'>浙江省</option>");
 out.print("<option value='350000'>福建省</option>");
%>
        </select> </td>
      <td id="d2"> 地区
        <select  id="harea" onchange="javascipt:area_chg();" >
          <option value=""></option>
        </select> </td>
      <td id="d3"> 县市
        <select  id="hcity" onchange="javascipt:city_chg();">
          <option value=""></option>
        </select> </td>
    </tr>

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