jquery ajax struts2 级联下拉框 动态生成省市
js文件：
/**
* author:zwl
* date:2013.9.17
*/
function getProvince(){
jQuery.ajax({
url :"ajax/getProvince.action",
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(json){
var sel1 = $("#sel_address1");
sel1.empty();
sel1.append("<option value='0'></option>");
for(var i=0;i<json.length;i++){
sel1.append("<option value="+json[i].proId+">"+json[i].proName+"</option>");
}
}
function getCity(){
var sel_val = $("#sel_address1").val();
jQuery.ajax({
url :"ajax/getCity.action",
type : "post",
date:{key:sel_val},
cache : false,
dataType : "json",
success:callback1
});
}
function callback1(json){
var sel2 = $("#sel_address2");
if(json.length!=0){
sel2.empty();
for(var i=0;i<json.length;i++){
sel2.append("<option value="+json[i].cityId+">"+json[i].cityName+"</option>");
}
}else{
sel2.hide();
}
}
$(function(){
$("#sel_address1").change(function(){
if($("#sel_address1").find("option:selected").text()){
$("#sel_address2").show();
getCity();
}else{
$("#sel_address2").hide();
}
});
});
$(document).ready(function(){
//登录页面就加载 省
var len=$("select[name=province] option").length;
if(len<2){
getProvince();
}
});jsp页面 只含部分代码 时间插件使用的是jquery easyui
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>sss</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css">
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="js/loadAddress.js"></script>
<script type="text/javascript">
/*时间格式 */
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
$(document).ready(function(){
$("#text_birthday").datebox({
currentText : "今天",
closeText : "关闭",
//required : true,//提示是否必须填写
//missingMessage : "必填",
formatter : myformatter
});
$("#text_enrolyear").datebox({
currentText : "今天",
closeText : "关闭",
formatter : myformatter
});
});
</script>
</head>
<body>
<form action="" name="myform" method="post">
<table>
<tr>
<td>出生日期：</td>
<td><input type="text" id="text_birthday" name="Stu_Birthday"></td>
<td><span id="span_birthday">请输入出生日期！</span></td>
</tr>
<tr>
<td >地址：</td>
<td colspan="2">
<span>
<select id="sel_address1" name="province" style="width:80px" >
<option value="0"></option>
</select>
</span>
<span>
<select id="sel_address2" style="width:80px">
<option value="0"></option>
<option>厦门市</option>
</select>
</span>
<br>
<input type="text" id="text_address3"
name="stu_address3">
</tr>
<tr>
<td>入学年份：</td>
<td><input type="text" id="text_enrolyear" name="stu_enrolyear"></td>
<td><span id="span_enrolyear"></span></td>
</tr>
<tr><td colspan="3"><input type="submit" value="修改"></td></tr>
</table>
</form>
</body>
</html>action代码：
//获取省
package com.blackhorse.ajax.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import net.sf.json.JSONArray;
import com.blackhorse.bean.Province;
import com.opensymphony.xwork2.ActionSupport;
/**
* 获取省份
*/
public class getAddress_province extends ActionSupport {
private static final long serialVersionUID = 1L;
public String getAddress() throws IOException{
HttpServletResponse response =ServletActionContext.getResponse();
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
response.setCharacterEncoding("utf-8");
Province p =new Province();
p.setProId(1);
p.setProName("福建1");
List<Province> list =new ArrayList<Province>();
list.add(p);
list.add(p);
list.add(p);
list.add(p);
JSONArray json = JSONArray.fromObject(list);
System.out.println(json);
response.getWriter().print(json);
return null;
}
}//获取市action
package com.blackhorse.ajax.action;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.apache.struts2.ServletActionContext;
import com.blackhorse.bean.City;
import com.opensymphony.xwork2.ActionSupport;
public class getAddress_city extends ActionSupport {
private String key;
public String getKey() {
return key;
}
public void setKey(String key) {
this.key = key;
}
@Override
public String execute() throws Exception {
HttpServletResponse response =ServletActionContext.getResponse();
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
response.setCharacterEncoding("utf-8");
System.out.println("key "+key);
City city =new City();
city.setCityId(1);
city.setCityName("厦门1");
List<City> list =new ArrayList<City>();
//list.add(city);
//list.add(city);
//list.add(city);
//list.add(city);
JSONArray json = JSONArray.fromObject(list);
System.out.println(json);
response.getWriter().print(json);
return null;
}
}struts xml配置：
<package name="ajax" namespace="/ajax" extends="struts-default"> <action name="getProvince" class="com.blackhorse.ajax.action.getAddress_province" method="getAddress"> </action> <action name="getCity" class="com.blackhorse.ajax.action.getAddress_city" method="execute"> </action> </package>
相关推荐
TONIYH 2020-07-22
83510998 2020-07-18
wcqwcq 2020-06-26
delmarks 2020-06-14
ppsurcao 2020-06-14
tthappyer 2020-06-07
李永毅 2020-06-21
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16