JQuery实例（一）- 二级联动
从这里开始的话，会整理一下JQuery的使用，主要是一些例子。
demo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Demo</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/province_city.js"></script>
</head>
<body>
<center>
<h3>省市二级联动</h3>
省份：<select id="sl_province"></select>
城市：<select id="sl_city"></select>
</center>
</body>
</html>
province_city.js
二级联动的总体思想是：
1.有一个省份下拉框，一个城市下拉框，
2.开始的时候，省份下拉框有数据，可以选择省份
3.选择完省份之后，如果选择的内容改变，就会根据省份的ID，动态的从后台获取城市数据
注意：
1.使用JQuery监听省份下拉框的change事件
2.每一次都需要清空城市下拉框的数据
(function() {
$().ready(function() {
//加载省份数据
getData('common!queryProvince' , function(data) {
showData($("#sl_province") , data);
});
//监听省份下拉框的改变
$("#sl_province").change(function() {
var id = $("#sl_province").val();
//清空数据
$("#sl_city").text("");
if(id > 0) {
getData('common!queryCity?id=' + id , function(data) {
showData($("#sl_city") , data);
});
}
});
/**
* 查询数据
*/
function getData(url , callback) {
$.ajax({
type: 'get',
url: url ,
dataType: 'json',
success: function(data) {
callback(data);
}
});
}
/**
* 显示数据
*/
function showData(obj , data) {
//遍历数据
$.each(data , function(i,element){
if(i == 0) {
obj.append("<option selected>请选择</option><option value='"+element.id+"'>"+element.name+"</option>");
} else {
obj.append("<option value='"+element.id+"'>"+element.name+"</option>");
}
});
}
//动态修改城市数据
});
})();
JQueryAction.java
package org.ygy.jquery.action;
import java.util.ArrayList;
import java.util.List;
import org.ygy.jquery.vo.SimpleVO;
import com.opensymphony.xwork2.ActionSupport;
public class JQueryAction extends ActionSupport {
private static final long serialVersionUID = 6797154008479295854L;
private List<SimpleVO> voList;
private Integer id;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public List<SimpleVO> getVoList() {
return voList;
}
public void setVoList(List<SimpleVO> voList) {
this.voList = voList;
}
/**
* 获取省份信息
* @return
*/
public String queryProvince() {
voList = new ArrayList<SimpleVO>();
voList.add(new SimpleVO(1 , "山东省"));
voList.add(new SimpleVO(2 , "辽宁省"));
voList.add(new SimpleVO(3 , "江苏省"));
return SUCCESS;
}
/**
* 获取城市信息
* @return
*/
public String queryCity() {
voList = new ArrayList<SimpleVO>();
switch(id) {
case 1:
voList.add(new SimpleVO(10 , "青岛市"));
voList.add(new SimpleVO(11 , "济南市"));
voList.add(new SimpleVO(12 , "烟台市"));
break;
case 2:
voList.add(new SimpleVO(20 , "丹东市"));
voList.add(new SimpleVO(21 , "大连市"));
voList.add(new SimpleVO(22 , "沈阳市"));
voList.add(new SimpleVO(23 , "鞍山市"));
break;
case 3:
voList.add(new SimpleVO(30 , "无锡市"));
voList.add(new SimpleVO(31 , "常州市"));
break;
}
return SUCCESS;
}
}
SimpleVO.java
package org.ygy.jquery.vo;
import java.io.Serializable;
public class SimpleVO implements Serializable {
private static final long serialVersionUID = 8269923725710560925L;
private Integer id;
private String name;
public SimpleVO() {}
public SimpleVO(Integer _id , String _name) {
this.id = _id;
this.name = _name;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
<constant name="struts.multipart.maxSize" value="20971520"/>
<constant name="struts.devMode" value="true" />
<package name="p_province" extends="json-default" namespace="/">
<action name="common" class="org.ygy.jquery.action.JQueryAction">
<result name="success" type="json">
<param name="root">voList</param>
</result>
</action>
</package>
</struts>