您的位置：首页 > Web前端 > JQuery

11级_Java_曹建波 04.07 jQuery easyUI tree +struts2+hibernate +mysql 实现 三级联动的案例

2013-04-07 13:33 417 查看
index.jsp

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/select.js"></script>
<body>
<div align="center">
<div>
<select id="province">
<option value="-1">请选择省</option>
</select>
<select id="city">
<option value="-1">请选择市</option>
</select>
<select id="country">
<option value="-1">请选择镇</option>
</select>
</div>
</div>
</body>


Select.js

$(document).ready(function() {

// 这是jQuery中第一个ajax案例
$.ajax({
async : true, // 代表异步发送请求
type : "GET", // 采用发送请求的方式 GET 或者POST
url : "./csdn/ProvinceAction_query.action?time=" + new Date().getTime(), // 设置请求的路径
dataType : "json", // 服务预返回的数据格式 json html xml text等
success : function(data, textStatus) { // 成功回调函数
// 获取所有的省
var jsonpros = data.provinces;
// 遍历省
for (var i = 0; i < jsonpros.length; i++) {
// 获取具体的省
var jsonpro = jsonpros[i];
// 创建一个option的元素节点
var $optpro = $("<option></option>");
// 设置其属性
$optpro.attr("value", jsonpro.pid);
// 设置文本
$optpro.text(jsonpro.pname);
// 把创建的option省节点添加到省的selete节点中
$("#province").append($optpro);

}
},
error : function(xhr, textStatus, errorThrown) {// 失败回调函数
}
});

// 这是jQuery中第二个ajax案例
// 当省发生变化的时候 触发操作
$("#province").bind("change", function() {

// 清空数据
$("#city").empty();
$("#country").empty();

// 传递的数据
var pid = $("#province").val();

$.get(	"./csdn/CityAction_query.action?time="
+ new Date().getTime(),// url 请求的路径
{
pid : pid
}, // data 请求传递的参数
function(data) { // 成功时 回调的函数
// 得到所有的市
var jsoncities = data.cities;
for (var i = 0; i < jsoncities.length; i++) {

// 获取具体的市
var jsoncity = jsoncities[i];
// 创建一个option的元素节点
var $optcity = $("<option></option>");
// 设置其属性
$optcity.attr("value", jsoncity.cid);
// 设置文本
$optcity.text(jsoncity.cname);
// 把创建的option市节点添加到市的select节点中
$("#city").append($optcity);

}

}, "json"); // type:返回的数据类型

});

// 这是jQuery中第三个ajax案例
$("#city").bind("change", function() {

//清空数据
$("#country").empty(); //第一个不清除
// 请求的参数
var cid = $("#city").val();

// 发送ajax
$.post(
"./csdn/CountryAction_query.action?time="
+ new Date().getTime(), {
cid : cid
}, function(data) {
// 得到所有的城镇
var jsoncountries = data.countries;
// 遍历所有的城镇
for (var i = 0; i < jsoncountries.length; i++) {
// 获取具体的市
var jsoncountry = jsoncountries[i];
// 创建一个option的元素节点
var $optcountry = $("<option></option>");
// 设置其属性
$optcountry.attr("value", jsoncountry.tid);
// 设置文本
$optcountry.text(jsoncountry.tname);
// 把创建的option城镇节点添加到城镇的select节点中
$("#country").append($optcountry);

}

}, "json");

});

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航