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");
});
});
3881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
