jQuery的ajax(get)省市联动

最新推荐文章于 2025-05-13 12:17:59 发布

原创最新推荐文章于 2025-05-13 12:17:59 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的级联选择器方法，该方法能够根据用户选择的省份、城市和区域来动态更新店铺选项。通过发送GET请求获取对应的数据并更新下拉列表。

$(function() {

$.get('${pageContext.request.contextPath }/sys/province.action',
function(data){
var jsonObj = data;
var selectValue = document.getElementById("province");
selectValue.options.length = 0;
var Item = new Option("-省-", -1);
selectValue.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.province, j.id);
selectValue.options.add(Item);
});
selectValue = document.getElementById("city");
selectValue.options.length = 0;
var Item = new Option("-市-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
});

$("#province").change(function() {
$.get('${pageContext.request.contextPath }/sys/city.action?id='+this.options[this.selectedIndex].value,
function(data){
var jsonObj = data;
selectValue = document.getElementById("city");
selectValue.options.length = 0;
var Item = new Option("-市-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.city, j.id);
selectValue.options.add(Item);
});

selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
});

});

$("#city").change(function() {
$.get('${pageContext.request.contextPath }/sys/area.action?id='+this.options[this.selectedIndex].value,
function(data){
var jsonObj = data;
selectValue = document.getElementById("district");
selectValue.options.length = 0;
var Item = new Option("-区-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.district, j.id);
selectValue.options.add(Item);
});
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
});

});

$("#district").change(function() {
$.get('${pageContext.request.contextPath }/shop/find.action?caddress='+this.options[this.selectedIndex].value,
function(data){
var jsonObj = data;
selectValue = document.getElementById("shop");
selectValue.options.length = 0;
var Item = new Option("-店-", -1);
selectValue.options.add(Item);
$.each(jsonObj, function(i,j) {
var Item = new Option(j.shopname, j.shopid);
selectValue.options.add(Item);
});
});

});

});

</script>