layui city-picker js实现全国地市区域级联选择

最新推荐文章于 2024-05-06 03:07:32 发布
最新推荐文章于 2024-05-06 03:07:32 发布
阅读量5.6k 收藏 6
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SELECT_BIN/article/details/88819421
版权
本文介绍了如何使用layui的city-picker实现全国地市区域级联选择，重点讲述了初次使用时可能遇到的问题及解决办法，包括layui模块加载错误和资源路径问题，并提到了jQuery的city-picker作为替代方案，同时讨论了城市数据动态更新的考虑。
摘要由CSDN通过智能技术生成

效果:

;

 

 实现：

layui官网的文档写的比较详细：https://fly.layui.com/extend/citypicker/

这里主要讲一下在第一次使用的时候踩的坑

1.使用方法：

head部分引用：

 <script src="/LayuiAdmin/layui/layui_exts/city-picker/city-picker.data.js"></script>
    <link href="/LayuiAdmin/layui/layui_exts/city-picker/city-picker.css" rel="stylesheet" />

body部分：

<div class="layui-inline">
      <label class="layui-form-label width_auto text-r" style="margin-top:2px">省市县：</label>
          <div class="layui-input-inline"
最低0.47元/天 解锁文章
SELECT_BIN
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
city-picker城市选择插件
11-29
city-picker城市选择插件，亲测可用，具体可见官网http://tshi0912.github.io/city-picker/
H5移动端选择器，layPicker移动端日期选择器
09-11
layPicker移动端选择器 基于jquery实现，可设置微信版和旧版、及自定义html 默认支持日期选择器 可自定义级联选择器 示例充足
城市选择器组件：`city-picker` - 简洁高效的城市选择解决方案
gitblog_00095的博客
04-12 554
城市选择器组件：city-picker - 简洁高效的城市选择解决方案 项目地址:https://gitcode.com/tshi0912/city-picker 在开发Web应用时，我们经常会遇到需要用户提供城市信息的需求，特别是涉及到地理位置服务或本地化功能的应用。为此，tshi0912 开发了一个名为 city-picker 的轻量级城市选择组件，旨在帮助开发者快速集成一个美观、易用且数据全...
layui省市区三级联动
最新发布
2401_84150102的博客
05-06 852
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
city-picker完成省市三级联动
Orangesss_的博客
08-28 1439
1. 导入两个js和一个css.(依赖JQuery) city-picker.data.js; city-picker.js; city-picker.css; 2. 两种指定用法: 第一种: HTML方式实现. &lt;div style="position: relative"&gt; &lt;input type="area" type...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
热门推荐
qq_41889508的博客
09-09 3万+
省市区三级联动插件citypicker的使用（数据从数据库获取或者从js文件获取），及一些使用当中会产生的问题的解决方法
省市区三级联动控件，city-picker的简单使用
HEGH的博客
05-31 3909
Github链接：https://github.com/tshi0912/city-picker 一、下载city-picker的压缩文件之后，打开dist文件夹 二、里面有我们需要的文件 三、首先引入css/js文件，这里JQ是必须存在的，建议使用压缩版的css/js文件 <link rel="stylesheet" href="city-picker.css...
jQuery省市区三级联动插件city-picker
02-28
`jQuery city-picker`就是一个专门解决这个问题的插件，它基于JavaScript库jQuery，实现了高效、易用的省市区三级联动效果。 ### 1. jQuery介绍 jQuery是JavaScript的一个轻量级库，它简化了HTML文档遍历、事件...
js地区选择插件city-picker，省市区数据同步微信小程序版
12-17
js地区选择插件city-picker，省市区数据同步微信小程序版 抓取数据的代码在博客 https://blog.csdn.net/jianye112/article/details/103586022
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 表单 地址： 立即提交 重置
基于layui封装了一个地址选择器地址数据采用weui的citypicker
08-09
基于layui封装了一个地址选择器，地址数据采用weui的city-picker
jQuery插件city-picker实现省市区三级联动
08-05
jQuery插件city-picker实现省市区三级联动。代码来源于互联网，版权归原作者。
cityPicker-2.0.3_cityPicker-2.0.3.js_CityPicker_cleanni1_
09-30
jQuery cityPicker城市模拟原生下拉选择插件
city-picker 城市选择插件
11-07
接着，`js`目录下的JavaScript文件负责处理city-picker插件的核心逻辑。这些文件可能包括初始化插件、处理用户输入、更新UI以及与服务器通信等操作。JavaScript代码会监听用户的交互事件，如点击、滚动等，并根据...
city-picker.js小文件
04-28
总结，city-picker.js是layui框架下的一款实用组件，它简化了城市选择器的实现，提供了良好的用户体验。通过合理的配置和扩展，它能广泛应用于各种需要选择地理位置的前端应用场景。希望这篇解析能对你的开发工作...
1分钟实现layui 省市区三级联动选择（不需要自己拥有区域库）
lw545034502的博客
04-10 3154
1、下载layui的省市区联动JS 下载地址（本人自己上传的资源，安全哦！）：https://download.csdn.net/download/lw545034502/16602679 2、编写html部分 整个选择器需要使用一个父标签包裹，如下使用了id="area-picker"，并且分别给省、市、区的select加上province-selector、city-selector、county-selector，用来区分对应的内容标签，这里也可以自定义lay-f...
el-date-picker组件实现选择整点
11-21
根据提供的引用内容，el-date-picker组件没有直接提供选择整点的属性和方法，但可以通过控制input焦点相关事件来实现。具体实现方法如下： 1.在el-date-picker组件中添加ref属性，用于获取组件实例。 2.在mounted钩子函数中获取el-date-picker组件实例，并为其绑定focus事件。 3.在focus事件中，通过this.$refs.datePicker.$el.querySelector('.el-date-picker__editor-wrap input')获取到input元素，并为其绑定keydown事件。 4.在keydown事件中，判断按下的键是否为回车键，如果是，则获取input中的值，并将其转换为整数，然后将其赋值给el-date-picker组件的value属性。 下面是实现代码： ```html <template> <el-date-picker v-model="date" ref="datePicker" type="datetime" placeholder="选择日期时间" ></el-date-picker> </template> <script> export default { data() { return { date: "", }; }, mounted() { const datePicker = this.$refs.datePicker; datePicker.$el.addEventListener("focus", this.handleFocus); }, methods: { handleFocus() { const input = this.$refs.datePicker.$el.querySelector( ".el-date-picker__editor-wrap input" ); input.addEventListener("keydown", this.handleKeydown); }, handleKeydown(event) { if (event.keyCode === 13) { const value = parseInt(event.target.value); if (!isNaN(value)) { const datePicker = this.$refs.datePicker; datePicker.value = new Date(datePicker.value); datePicker.value.setHours(value); } } }, }, }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值