中国省市区地址三级联动jQuery插件

最新推荐文章于 2023-07-25 20:38:09 发布
最新推荐文章于 2023-07-25 20:38:09 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 前端 文章标签： jquery插件 jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q15150676766/article/details/69663700
版权

中国省市区地址三级联动jQuery插件

这个插件从https://www.jq22.com上下载的插件，并将我个人认为是多与代码删除之后的效果。
除了bootstrap和jquery等相关的必要的css和js文件之外，还需要引入 distpicker.data.js、distpicker.js、main.js这三个文件。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'Address.jsp' starting page</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!--[if lt IE 8]>
    <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please <a
            href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
    </p>
    <![endif]-->
    <div class="jq22-container">
        <div class="container">
            <h4>中国省市区地址三级联动jQuery插件</h4>
            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province1">Province</label> <select
                            class="form-control" id="province1"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city1">City</label> <select
                            class="form-control" id="city1"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district1">District</label> <select
                            class="form-control" id="district1"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province2">Province</label> <select
                            class="form-control" id="province2" data-province="---- 选择省 ----"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city2">City</label> <select
                            class="form-control" id="city2" data-city="---- 选择市 ----"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district2">District</label> <select
                            class="form-control" id="district2" data-district="---- 选择区 ----"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province3">Province</label> <select
                            class="form-control" id="province3" data-province="浙江省"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city3">City</label> <select
                            class="form-control" id="city3" data-city="杭州市"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district3">District</label> <select
                            class="form-control" id="district3" data-district="西湖区"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker1">
                    <div class="form-group">
                        <label class="sr-only" for="province4">Province</label> <select
                            class="form-control" id="province4"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city4">City</label> <select
                            class="form-control" id="city4"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district4">District</label> <select
                            class="form-control" id="district4"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker2">
                    <div class="form-group">
                        <label class="sr-only" for="province5">Province</label> <select
                            class="form-control" id="province5"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city5">City</label> <select
                            class="form-control" id="city5"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district5">District</label> <select
                            class="form-control" id="district5"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker3">
                    <div class="form-group">
                        <label class="sr-only" for="province6">Province</label> <select
                            class="form-control" id="province6"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city6">City</label> <select
                            class="form-control" id="city6"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district6">District</label> <select
                            class="form-control" id="district6"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province">Province</label> <select
                            class="form-control" id="province"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city">City</label> <select
                            class="form-control" id="city"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district">District</label> <select
                            class="form-control" id="district"></select>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" id="reset" type="button">Reset</button>
                        <button class="btn btn-warning" id="reset-deep" type="button">Reset
                            (deep)</button>
                        <button class="btn btn-danger" id="destroy" type="button">Destroy</button>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province7">Province</label> <select
                            class="form-control" id="province7"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city7">City</label> <select
                            class="form-control" id="city7"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div data-toggle="distpicker">
                    <div class="form-group">
                        <label class="sr-only" for="province8">Province</label> <select
                            class="form-control" id="province8"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker4">
                    <div class="form-group">
                        <label class="sr-only" for="province9">Province</label> <select
                            class="form-control" id="province9"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city9">City</label> <select
                            class="form-control" id="city9"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district9">District</label> <select
                            class="form-control" id="district9"></select>
                    </div>
                </div>
            </form>

            <form class="form-inline">
                <div id="distpicker5">
                    <div class="form-group">
                        <label class="sr-only" for="province10">Province</label> <select
                            class="form-control" id="province10"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="city10">City</label> <select
                            class="form-control" id="city10"></select>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="district10">District</label> <select
                            class="form-control" id="district10"></select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/Address/distpicker.data.js"></script>
    <script src="js/Address/distpicker.js"></script>
    <script src="js/Address/main.js"></script>
</body>

</html>
这个是效果图

这里写图片描述

注:若地址信息有误，可在distpicker.data.js中进行修改
ncfl
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery地址选择插件Distpicker
rainbow8300的博客
05-08 1231
首先就是引入distpicker的相关js，具体样式的话可以根据自己想要的去调。
jQuery省市区城市三级联动插件
06-01
jQuery省市区城市三级联动插件
中国省市区地址三级联动jQuery插件：一个简单的jQuery插件，用于选择中国的省、市、区
qq_41193701的博客
12-13 626
在前端时间项目开发中因为使用的是jQuery 项目需要用到三级联动 在网上找了很久都不是比较简便和理想 最后不经意之间找到这个插件 也顺便分享给大家 博主在次处作为转载方 开源不易大家也可也到原博主的GitHub中点上☆☆支持一下 插件有很多种不同模式 在配置、兼容、和使用方面都比较完美 在页面中引入封装好了的必要js文件即可其使用方式有多种可根据实际需要进行使用 1：直接引用 自动关联 <...
【Jquery插件】下拉框三级联动选择 省市区三级联动选择
freshflower
05-28 1604
     省市区三级联动选择, 在我们开发中很常见, 下一级的下拉框数据与上一级的下拉框的值紧密相关, 所以需要我们处理的时候格外小心, 及时清理数据, 异步加载数据时再去绑定值不容半点马虎.       我今天给大家分享一个比较通用的Js插件, 虽然叫JQuery插件, 但也只是引用到了它一般的方法, 并非底层. 这个插件除了省市区外, 还可以根据自己的意思灵活配置成你想要的三级联动或二级...
jquery省市区三级联动插件CitySelect
风火燎原、
06-25 1543
CitySelect是一个通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果的jquery插件。 CitySelect使用方法： 一、在页面当中引用该文件 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&amp
jQuery省市区三级联动插件
06-24
jQuery省市区三级联动插件是一款不错的城市三级联动插件。
distpicker是一款可以实现中国省市区地址三级联动jQuery插件
08-07
distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单，简单设置即可完成中国省市区地址联动效果
强大的jQuery省市区城市三级联动插件
06-10
一款非常强大的jQuery省市区城市三级联动插件，内附详细使用说明。
jquery省市区三级联动插件(数据全)
10-10
是一个jquery省市区三级联动，支持默认设置省、市、区，数据很全，调用简单，浏览器兼容很好，需要的下载试试吧
jqURL地址处理插件 jquery插件
12-05
jqURL地址处理插件 可以获取页面URL 点击新开一个200x200的google.com窗口 $.jqURL.loc('http://www.google.com',{w:200,h:200,wintype:'_blank'}); 点击获取页面URL地址 $.jqURL.url(); 点击获取页面URL地址传递的参数 $.jqURL.qs(); 点击获取页面去除参数后的地址 $.jqURL.strip(); 点击获取页面URL传递的参数a的值 $.jqURL.get("a");
jquery实现地址联动
08-01
jquery实现地址联动
js省市联动插件
10-31
纯js省市联动插件 ，实现省市区三级联动，省市区三级联动
中国省市区地址三级联动插件Distpicker和日期插件WDatePicker的使用
御前两把刀的专栏
07-28 1410
一  省市区地址三级联动插件Distpicker的使用 distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单，简单设置即可完成中国省市区地址联动效果。 案例教程 1.  引入需要的js文件 2 编写页面代码 &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&g...
jQuery实现省、市二级联动
最新发布
07-25 5556
客户端省市二级联动.jsp<html><head>$(function(){/* 指定一个函数，在文档加载完成后被调用。*//* 异步请求 查询省信息 */$.ajax({/* eval() 函数是 JavaScript 中的一个全局函数，它将传入的字符串data作为 JavaScript 代码进行解析和执行。
jquery省市区插件选择，地址选择（仿某东简单编写）
hacker5077的专栏
03-17 443
省市区插件，jquery省市区选择，京东地址选择，地址选择
element-china-area-data中国省市区三级联动插件
Change!
10-28 6058
element全国省市区三级联动插件
jquery+weui弹出式城市地区选择插件
ICode联盟
01-29 462
jquery+weui弹出式城市地区选择插件，可以用在手机移动端设备，从底部滑出覆盖层，滑动多级选择。
jquery省市区三级联动
03-29
以下是一个简单的jQuery省市区三级联动示例： HTML代码： ``` 请选择省份 北京市 上海市 广东省 请选择城市 请选择区县 ``` jQuery代码： ``` $(function(){ // 省份改变事件 $('#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值