动态实现二级下拉框（有点乱）

来源：互联网发布：java注释规范整理编辑：程序博客网时间：2024/06/05 06:06

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.love21cn.model.City"%>
<%@ page import="com.love21cn.model.PayType"%>
<%@ page import="com.love21cn.model.Province"%>
<%@ page import="com.love21cn.factory.PayTypeFactory"%>
<%@ page import="com.love21cn.factory.UserTypeFactory"%>
<%

String provinceId = (String) request.getAttribute("province");
if (provinceId == null) provinceId = "";
String cityId = (String) request.getAttribute("city");
if (cityId == null) cityId = "";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态实现二级下拉查询</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link href="/css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="<%=webapp %>script/My97DatePicker/WdatePicker.js"></script>
</head>

<body>
<table>
<tr height="25">
<td width="80"></td>
<td></td>
</tr>
<tr height="25">
<td width="80"></td>
<td>
<form name="myform"
action="<%=com.love21cn.util.Common.getContextPath(request.getContextPath())%>admin/statistWapAction.do"
method="post" onsubmit="return check_number()">

<table width="700" border="0" cellpadding="3" cellspacing="1"
bgcolor="#AEB5A5">

<tr>
<td bgcolor="#FFFFFF" align="right" width="100">地区：</td>
<td bgcolor="#FFFFFF" align="left">
 
<select name="province" class="input2" onchange="changeCity();">
<option value="" selected>
全部
</option>

<%
List provinceList = UserTypeFactory.getAllProvince();
for (int i = 0; i < provinceList.size(); i++) {
Province province = (Province) provinceList.get(i);
if (provinceId != null && !"".equals(provinceId)
&& Integer.parseInt(provinceId) == province.getId()) {
%>
<option value="<%=province.getId()%>" selected><%=province.getProvince()%></option>
<%
} else {
%>
<option value="<%=province.getId()%>"><%=province.getProvince()%></option>
<%
}
}
%>
</select>
<select name="city" class="input2">
<option value="" selected>
全部
</option>
</select>
</td>
</tr>
<tr bgcolor="EBEBEB">
<td colspan="2" align="center">
<input name="submit2" type="submit" class="button0" value="提交">
 
<input name="reset2" type="reset" class="button0" value="重新填写">
</td>
</tr>
</table>

</form>
</td>
</tr>
</table>

<script type="text/javascript">

//城市信息
var cityIdArray = new Array();
var cityNameArray = new Array();
<%
//从数据库中查出所有的市并遍历放在数组中
List cityList = UserTypeFactory.getAllCity();
for(int i=0;cityList!=null && i<cityList.size();i++){
City city = (City)cityList.get(i);
%>
cityIdArray[<%=i%>]='<%=city.getId()%>';
cityNameArray[<%=i%>]='<%=city.getCity()%>';
<%
}
%>
function changeCity()
{
//清空options集合
var length = myform.city.options.length;
for(var i=length-1;i>0;i--){
myform.city.options.remove(i);
}
//添加新option
var provinceValue = myform.province.options(myform.province.selectedIndex).value;//点击当前省份的value值
if(provinceValue!=''){
for (var i = 0; i < cityIdArray.length; i++) {
var cityId = cityIdArray[i];
//省份的value值对应城市value值前两位，相等则该城市为这个省的
if(cityId.substring(0,2)== provinceValue){
myform.city.add(new Option(cityNameArray[i],cityId));
}
}
myform.city.selectedIndex = 0;
}
}
<%
if(provinceId!=null && !"".equals(provinceId)){
out.print("changeCity();");
}
if(cityId!=null && !"".equals(cityId)){
%>
//设置city options集合
var length = myform.city.options.length;
for(var i=0;i<length;i++){
if(myform.city.options[i].value == '<%=cityId%>'){
myform.city.selectedIndex = i;
}
}
<%
}
%>

</script>
</body>
</html>

0 0