city-picker省市区选择三级联动列表

最新推荐文章于 2024-07-04 13:50:52 发布
最新推荐文章于 2024-07-04 13:50:52 发布
阅读量1.7k 收藏
点赞数
文章标签： 一
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roc_wl/article/details/82024907
版权

网址：HTTP：//tshi0912.github.io/city-picker/
这是城市选取器的下载网址下载：city-picker-master.zip
这里写图片描述
还需要jQuery的文件
首先，我们需要在HTML页面中引入以下4个文件

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script>
        <link rel="stylesheet" href="js/citypicker/css/city-picker.css" />

一，两种指定城市选择器用法

  1. HTML
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>HTML用法</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script>
    <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script>
    <link rel="stylesheet" href="js/citypicker/css/city-picker.css" />
    </head>
    <body>
    <div style="position: relative;">
    <input name="area" type="text" data-toggle="city-picker" size="80"/>
    </div>
    </body>
    </html>
  2. JS
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>JS用法</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script>
    <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script>
    <link rel="stylesheet" href="js/citypicker/css/city-picker.css" />
    <script type="text/javascript">
    $(function(){
    $("#area").citypicker();
    });
    </script>
    </head>
    <body>
    <div style="position: relative;">
    <input id="area" name="area" type="text" size="80"/>
    </div>
    </body>
    </html>
  3. 清除城市选择器选中内容









（function（）{ （功能（）{ （“＃return”）。click（function（）{
（ “#reset”）。点击（函数（）{










“'4。动态赋值

 charset="utf-8" />
        <title>JS用法</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.data.js" ></script>
        <script type="text/javascript" src="js/citypicker/js/city-picker.js" ></script>
        <link rel="stylesheet" href="js/citypicker/css/city-picker.css" />
        <script type="text/javascript">
            $(function(){
                $("#area").citypicker();
                $("#setValBtn").click(function(){
                    // 赋值前，必须先执行 reset、destroy
                    $('#area').citypicker('reset');
                    $('#area').citypicker('destroy');

                    $('#area').citypicker({
                      province: '江苏省',
                      city: '常州市',
                      district: '溧阳市'
                    });
                });
            });
        </script>
    </head>
    <body>
        <div style="position: relative;">
            <input id="area" name="area" type="text" size="80"/>
            <input type="button" id="setValBtn" value="赋值"  />
        </div>
    </body>
</html>
roc_wl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
jQuery插件city-picker实现省市区三级联动
08-05
jQuery插件city-picker实现省市区三级联动。代码来源于互联网，版权归原作者。
harmong2.0—组件：picker省市区三级联动
roydon
09-25 2289
思路：省市区联动需要三个picker组件。先拿到数据，把默认的省市区展示出来。然后添加picker的值改变事件，滑动省，省对应的市会在第二个picker中展示出来，同时，市对应的区也会对应刷新展示。picker是一种滑动选择组件，在一些app的选择地址中很常用。完整代码请前往Github–>
React 省市查询组件完整代码
最新发布
qq_50909707的博客
07-04 556
【代码】React 省市查询组件完整代码。
FadstAdmin的city-picker插件实现地区多选
withoutfear的博客
11-28 898
在public\assets\libs\fastadmin-citypicker目录下原有的基础上复制一份，重命名city-picker-multi.min.js，在这个基础上更改。这样加载就ok了，那么怎么绑定触发呢？参考city-picker的使用，在require-form.js中新增一下内容。以上代码只是初步满足了需求。
city-picker城市选择插件
11-29
city-picker城市选择插件，亲测可用，具体可见官网http://tshi0912.github.io/city-picker/
Vue + ElementUI的el-cascader实现多选三级省市区(全选省 / 市 保存的是省市)
记得抬头微笑
01-27 6060
el-cascader多选三级省市区(全选省/市 保存的是省市Code) 业务场景：需求是多选三级省市区, 开发一个区域组功能(而且产品也是比较希望使用el-cascader来进行实现) 需求实现截图: 那就开始整呗, 找ElementUI的组件去实现这个 // Vue的基本样式 <el-cascader v-model="regionList" ref="cascader" :options="treeList" :props="{ multiple
jQuery省市区三级联动插件city-picker
02-28
在网页开发中，经常需要实现省市区三级联动的效果，即用户选择一个省份后，相应的城市列表自动更新，再选择城市时，对应的区县列表也会随之变化。这种功能可以提升用户体验，减少用户输入，使数据选择更为便捷。`...
city_picker:中国省市区街道四级联动地址选择器
05-09
中国省市区街道四级联地址选择，js代码来自 , 数据来自 安装 Gemfile gem 'city_picker' app/assets/javascripts/application.js //= require city_picker/city_picker app/assets/stylesheets/application.css *= ...
jQuery省市区三级联动插件city-picker特效代码
03-20
在本案例中，我们关注的是一个基于jQuery的插件——city-picker，它专门用于实现这种省市区三级联动的效果。这个插件设计精巧，用户体验友好，能够以下拉面板的形式展示，并且支持无刷新操作，这意味着用户在选择时...
jQuery省市区三级联动插件city-picker.zip
07-04
5. **易于集成**：只需引入 `jQuery` 和 `city-picker` 相关文件，通过简单的 JavaScript 调用和 HTML 结构即可快速实现省市区联动效果。 使用 `jQuery city-picker` 的步骤如下： 1. **引入依赖**：首先在页面中...
city-picker的简单使用
热门推荐
bsw451926392的博客
12-24 2万+
city-picker的使用:html1. 下载city-picker，解压之后2.将下面这个文件复制到项目当中3.导入一下三个js文件到页面，同时还要引入css样式（xxx.html）<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/city-picker.data
Select2实现全国省市区三级联动下拉菜单.zip
08-12
JS文件中的Select 有2个,我想做成联动的,例如选择" 信息采集器 " 那么第二个Select 就自动显示"A" 选择 " 信息变送器 " 就自动显示 “ B ” 怎么实现~~求高手,求专家！网上找的代码，测试了都不行！ 是不是因为这个是JQUERY 插入表格的问题。 加到我写的里边之后就不行了，我是使用Jquery 动态添加的表格,表格里放的Select。
citypicker:城市选择器
07-21
citypicker 按省份选择城市，使用方法请查阅其中的demo.html
city-picker 城市选择插件
11-07
city-picker 城市选择插件
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单，适合wap、html5页面使用
10-16
超漂亮的基于jquery的H5省市区县三级地区级联选择菜单，适合wap、html5页面使用。无用代码全部剥离干净。界面漂亮、兼容性好。
Layui 使用 citypicker 省市区级联选择地址
01-08
Layui 使用 TinyMCE 富文本编辑器Layui 使用 citypicker 省市区级联选择地址1.进入 Layui 第三方组件平台下载该拓展组件2.写一个测试 Demo3.结果查看及补充4.效果演示5.源码地址 Layui 使用 citypicker 省市区级联选择地址 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 代码结构树如下，extend 目录下加入我们刚下载的 citypicker 拓展组件 先记得在 head 内引入 css 和 js 文件 再随便写一个 form 表单 地址： 立即提交 重置
Vue-City-Picker：一款高效易用的城市选择器组件
gitblog_00035的博客
04-24 656
Vue-City-Picker：一款高效易用的城市选择器组件 项目地址:https://gitcode.com/dai-siki/vue-city-picker Vue-City-Picker 是一个基于 Vue.js 的城市选择器插件，专为 Web 应用提供简洁、灵活的城市数据检索和选择功能。该项目由 dai-siki 开发并维护，可以在 GitCode 上找到。本篇文章将带你深入了解它的技术特...
distpicker省市区联动 jquery+bootstrap
yangclqz的博客
09-29 5440
最近在网上下载distpicker省市区三级联动源码，使用过程中发现无法动态赋值，所以自己制作了一个基础jquery+bootstrap的distpicker插件。 源码下载地址： 2017省市区联动插件 1、首先引用JS及CSS 2、页面DOM布局 测试效果有默认值
Layui 使用 citypicker 省市区级联选择地址或赋值或回显数据
Fun12306的博客
06-16 1267
city-picker 插件 页面效果
uview u-picker省市区三级联动
05-20
uview的u-picker组件可以实现省市区三级联动，使用时需要设置相应的数据源。以下是一个简单的例子： ```html <template> <view> <u-picker :picker-data="pickerData" :default-value="defaultValue" @change="onChange" /> </view> </template> <script> export default { data() { return { pickerData: [], defaultValue: [], }; }, mounted() { // 获取省市区数据 this.getAreaData(); }, methods: { async getAreaData() { // 发送请求获取省市区数据 const res = await this.$http.get('/api/area'); // 处理数据，将数据转换为u-picker可用的格式 this.pickerData = [ { label: '请选择', value: '', children: res.data.map((province) => ({ label: province.name, value: province.id, children: province.cities.map((city) => ({ label: city.name, value: city.id, children: city.areas.map((area) => ({ label: area.name, value: area.id, })), })), })), }, ]; // 设置默认值为当前所在地区 this.setDefaultArea(); }, setDefaultArea() { // 获取当前所在地区，将其设置为默认值 const area = this.$store.state.area; if (area.province && area.city && area.area) { this.defaultValue = [area.province.id, area.city.id, area.area.id]; } }, onChange(value) { // 处理选中的值 console.log(value); }, }, }; </script> ``` 在上面的代码中，我们使用了u-picker组件，并将picker-data设置为一个数组，数组中包含省市区三级数据。defaultValue设置为一个数组，数组中包含当前所在地区的id，这样在渲染u-picker时，就会自动选中对应的省市区。当用户选择省市区时，会触发onChange事件，我们可以在这里处理用户选择的省市区数据。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值