400-800-9385
网站建设资讯详细

省市区级三级联动查询PHP网站实现

发表日期:2023-02-04 13:47:38   作者来源:黎云辉   浏览:575   标签:PHP网站制作    
在建设企业网站或购物商城网站的时候,会需要用到省市区的地区选项卡,但我们又不可能自己重新去写一个,虽然难度不大,但是工作量很大,所以一般都是直接使用插件就好了。
以下是我最近使用到的一个省市区级三级联查。
1、Html代码
2、Js代码
3、Json代码
Html代码如下:
(样式方面,根据项目的需要调用就好,这里的关键是id的值,需要和下面的js相对应,不然没法联查)
 

html代码


 
<div class="top-item">
<div><span>*</span>地区:</div>
<div class="item-address">
<!-- 省级 -->
<select class="register-allb-s" id="xdt" name="input_province" lay-verify="required">
</select>
<!-- 市级 -->
<select class="register-allb-s" id="sdt" name="input_city" lay-verify="required">
</select>
<!-- 区县级 -->
<select class="register-allb-s" id="qdt" name="input_area" lay-verify="required">
</select>
</div>
</div>
 
Js代码如下:
 

js代码


 
<script>
var Arry = [];
$(function () {
$("select").prepend('<option value="0">请选择</option>');
x();//加载省级数据
$("#xdt").change(function () {
$("#sdt").empty();
$("#sdt").prepend('<option value="0">请选择</option>');
var val = $("#xdt  option:selected").attr('exid');
s(val);
});//点击省级加载市级数据
$("#sdt").change(function () {
$("#qdt").empty();
$("#qdt").prepend('<option value="0">请选择</option>');
var index = $("#xdt  option:selected").attr('exid');
var val = $("#sdt  option:selected").attr('exid');
q(index, val);
});//点击市级加载区县级数据
});
function x() {
$.ajax({
url: "/wjh/xsq.json",//Json文件的存放位置
contentType: "application/json; charset=utf-8",
type: "get",
dataType: "json",
success: function (data) {
Arry = data;
for (var i = 0; i < data.length; i++) {
$("#xdt").prepend('<option class="options" value="' + data[i].name + '" exid="'+ i +'">' + data[i].name + '</option>');
}
}
});
}
function s(val) {
var data = Arry;
var arr = data[val].city;
for (var i = 0; i < arr.length; i++) {
$("#sdt").append('<option  value="' + arr[i].name + '" exid="'+ i +'">' + arr[i].name + '</option>');
}
}
function q(idex, val) {
var data = Arry;
var arr = data[idex].city[val].area;
for (var i = 0; i < arr.length; i++) {
$("#qdt").prepend('<option  value="' + arr[i] + '" exid="'+ i +'">' + arr[i] + '</option>');
}
}
</script>
 
Json代码如下:
 

json代码


[
{
"name": "北京市",
"city": [
{
"name": "北京市",
"area": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"平谷区",
"怀柔区",
"密云县",
"延庆县"
]
}
]
}
]
 
Json文件直接引用即可,如有缺少或错误,也可以执行编辑
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6667.html