FastAdmin城市选择

FastAdmin中集成了强大的city-picker城市选择插件,可以很方便的选择省份和城市。

常规示例

我们只需要简单的为input元素添加一个data-toggle="city-picker"属性即可自动渲染相应的城市选择组件,如下:

<div class='control-relative'>
    <input id="c-city" class="form-control" data-toggle="city-picker" name="row[city]" type="text" value="" />
</div>

常用属性

我们还可以通过添加以下属性来扩展城市选择组件的功能

属性描述示例
data-level选择城市的级别,支持province/city/district,默认为districtdata-level="city"
data-simple使用简单的地址,比如使用内蒙古替代内蒙古自治区,默认为falsedata-simple="true"
data-responsive是否为自适应,默认为falsedata-responsive="true"
placeholder默认提示的文字placeholder="请选择省/市"

事件捕获

city-picker组件默认选择后渲染的是中文城市信息,我们可以通过在JS中监听city-picker更新后的事件来获取省份城市地区对应的code值。代码如下:

$("#city-picker").on("cp:updated", function() {
  var citypicker = $(this).data("citypicker");
  var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
  $("#code").val(code);
});

如果我们数据库中存放的是地区的code值,在显示时我们则需要把对应的code通过读取数据库转换成我们的地区中文,然后再设定input的value值即可。

更多的使用方法请参考city-picker官方教程

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

触发修改文章时间【fastadmincms开发记录】|fastadmincms二次开发,触发,修改,文章,时间,fastadmin,ms,开发,记录
触发修改文章时间【fastadmincms开发记录】
在tp5中过滤输入的零宽度字符【fastadmincms开发记录】|fastadmincms二次开发,在tp5中,过滤,输入,的零,宽度,字符,fastadmin,ms,开发,记录
在tp5中过滤输入的零宽度字符【fastadmincms开发记录】
处理tag标签中的0宽空格【fastadmincms开发记录】|fastadmincms二次开发,处理,tag,标签,中的,0宽,空格,fastadmin,ms,开发,记录
处理tag标签中的0宽空格【fastadmincms开发记录】
添加专题时tags标签id出错【fastadmincms开发记录】|fastadmincms二次开发,添加,专题,时tags,标签,id,出错,fastadmin,ms,开发,记录
添加专题时tags标签id出错【fastadmincms开发记录】
20230518----模板 广告【fastadmincms开发记录】|fastadmincms二次开发,20230518,模板,广告,fastadmin,ms,开发,记录
20230518----模板 广告【fastadmincms开发记录】
cms添加视频模型【fastadmincms开发记录】|fastadmincms二次开发,ms,添加,视频,模型,fastadmin,开发,记录
cms添加视频模型【fastadmincms开发记录】
新增单篇收费复制功能【fastadmincms开发记录】|fastadmincms二次开发,新增,单篇,收费,复制,功能,fastadmin,ms,开发,记录
新增单篇收费复制功能【fastadmincms开发记录】
添加开会员折扣功能【fastadmincms开发记录】|fastadmincms二次开发,添加,开会,折扣,功能,fastadmin,ms,开发,记录
添加开会员折扣功能【fastadmincms开发记录】

历史上的今天:04月28日

FastAdmin-CMS模版制作(4)-通用引入

FastAdmin-CMS模版制作(4)-通用引入一、通用引入文件1.在模版文件夹内新建一个common文件夹,在commn文件夹内新建layout.html文件,改文件为整个站点结构的通用文件(文件夹和文件可以根据自己喜好进行命名,并没有强制要求),对模版文件夹不熟悉的请阅读上一章。image.png2.抽出网站的通用头部;底部;公用引入css、js、image代码,这里的通用是指在每个页面上都

DNS 预解析

DNS Prefetch 应该尽量的放在网页的前面,推荐放在&lt;meta charset=&quot;UTF-8&quot;&gt;后面。具体使用方法如下&lt;metahttp-equiv=&quot;x-dns-prefetch-control&quot;content=&quot;on&quot;&gt;&lt;linkrel=&quot;dns-prefetch&quot;href=&

解疑:rel=”pingback“ 有什么用?

解疑:rel=”pingback“ 有什么用?wp 中如下link 到底有什么用?&lt;link rel=&quot;pingback&quot; href=&quot;&lt;?php bloginfo( &#39;pingback_url&#39; ); ?&gt;&quot;&gt;PingBack声明是什么?Pingback是博客中用来通知其他网志系统文章被引用情况的一种手段。它出现完全

dns-prefetch是什么 前端优化:DNS预解析提升页面速度

dns-prefetch是什么 前端优化:DNS预解析提升页面速度在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢目录诞生背景Dns请求虽然占用了很少的带宽,但会有很高的延迟,由其以移动网络会更加明显。通过dns预解析技术可以很好的降低延迟在firefox上使用dns-prefe

热门专题

大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
安徽中源管业有限公司|安徽中源管业有限公司,安徽中源管业有限公司介绍,安徽中源管业有限公司电话,安徽中源管业有限公司地址,安徽中源管业有限公司厂家,安徽中源管业有限公司电力管,安徽中源管业有限公司管材
安徽中源管业有限公司
卓越综合高中|卓越综合高中
卓越综合高中
昆明综合高中|昆明综合高中
昆明综合高中
云南综合高中|云南综合高中
云南综合高中

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部