jQuery的ajax(get)省市联动-优快云博客

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(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>