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

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

发表于：2007-07-01来源：作者：点击数：标签：

经过两天苦战，总算用js+jsp搞定在同一个下拉框中，在不刷新页面的情况下，动态生成多级select选项一、先确定需求及要达到的效果要达到的效果如下图 [ ] 为了便于各位的调试，我将代码进行了简化，取数据部分我去掉了，各位可修改成自己用的数据二、说

经过两天苦战，总算用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 style="display:none">进行隐藏，每次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 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 style="display:inline " 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 style="display:none " id="d2"> 地区
        <select id="harea" onChange="javascipt:area_chg();" >
          <option value=""></option>
        </select> </td>
      <td style="display:none " id="d3"> 县市
        <select id="hcity" onChange="javascipt:city_chg();">
          <option value=""></option>
        </select> </td>
    </tr>

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

原文转自：http://www.ltesting.net

软件测试 > 测试开发技术 > 软件测试开发语言 > Java >