首 页
关于方维
网站案例
网站建设
小程序开发
解决方案
建站资讯
联系方维
400-800-9385
省市区级三级联动查询PHP网站实现
发表日期:2023-02-04 13:47:38 作者来源:黎云辉 浏览:1443 标签:
PHP网站制作
当前位置:
首页
-
建站资讯
-
网站建设
在建设企业网站或购物商城网站的时候,会需要用到省市区的地区选项卡,但我们又不可能自己重新去写一个,虽然难度不大,但是工作量很大,所以一般都是直接使用插件就好了。
以下是我最近使用到的一个省市区级三级联查。
1、
Html代码
2、
J
s代码
3、
J
son代码
Html代码如下:
(样式方面,根据项目的需要调用就好,这里的关键是id的值,需要和下面的js相对应,不然没法联查)
<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代码如下:
<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代码如下:
[
{
"name": "北京市",
"city": [
{
"name": "北京市",
"area": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"平谷区",
"怀柔区",
"密云县",
"延庆县"
]
}
]
}
]
Json文件直接引用即可,如有缺少或错误,也可以执行编辑
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6667.html
上一篇:
维修小程序功能说明(五)
下一篇:
我总结了65个设计术语,你都知道吗?
相关网站设计案例
网是科技
网度新货站点
上海巴克斯酒业有限公司(锐澳)
相关资讯
多语言PHP网站开发方式介绍
日期:2025-02-10 浏览:93
用PHP程序发送邮件带上附件的方法
日期:2024-12-30 浏览:358
极速外贸网站搭建方式:PHP+OSS+CDN加速...
日期:2024-12-20 浏览:364
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
谷歌禁用Flash导致文件无法上传解决办法(20...
浏览量:5700
thinkphp5开发网站如何引入phpexcel...
浏览量:1360
php抓取第三方网站的小说内容
浏览量:1401
网页设计中的视频:使用它有意义吗?
浏览量:1421
谷歌浏览器打开网站显示危险警告...
浏览量:7894
【签约】矽电半导体网站建设项目
浏览量:1922
400-800-9385
97798819
回到顶部
0
请您留言
非常抱歉,客服不在线,麻烦留下您的联系电话或者微信,我们看到后会马上联系您!
提交
感谢留言
我们会尽快与您联系
关闭