用jQuery中的ajax写的返回json数据的二级联动
Html中的代码
<body>
<div align="center">
<h3>
用jQuery返回json数据的二级联动
</h3>
<select id="pro">
<option>
请选择省
</option>
</select>
<select id="city">
<option>
请选择市
</option>
</select>
</div>
</body>
Js中的代码
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("./servlet/ProCityJQueryServlet", function(data) {
//通过dom对象转换为jQuery对象来获取省并处理
$(data).each(function(index, dom) {
//创建optin标签
var $opt = $("<option/>");
//向option标签中添加省
$opt.append(dom.pName);
//把省的名字添加到id为pro的页面中
$("#pro").append($opt);
});
//当点击省的时候发生改变
$("#pro").change(function() {
//清空每一次累加的市,除去第0项，因为第一项是:请选择市
var $optC = $("#city>option:gt(0)");
$optC.each(function(index, dom) {
if (index == 1) {
$("#city").empty(dom);
}
});
//遍历data数据
$(data).each(function(index, dom) {
//判断点击的是哪个省
if ($("#pro").val() == dom.pName) {
//通过省来找到市
var $cityOpt = $(dom.city);
//遍历点击的市名
$cityOpt.each(function(index, domCity) {
//创建option标签
var $optCity = $("<option/>");
//把市名添加到option中
$optCity.append(domCity.cName);
//向id为city中添加option
$("#city").append($optCity);
});
}
});
});
});
});
</script>
从servlet中传过来的数据为json数据：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=\"UTF-8\"");
request.setCharacterEncoding("utf-8");
List<Province> pro = provinceServiceImpl.findAll();
PrintWriter out = response.getWriter();
out.println(JSONArray.fromObject(pro));//返回的是json数组
out.flush();
out.close();
}
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
