jQuery省市区三级联动菜单

所属分类:输入-选择框

 55058  330  查看评论 (19)
分享到微信朋友圈
X
jQuery省市区三级联动菜单 ie兼容6

使用方法:

1)html中添加三个select标签,id名称分别为provincecitytown,并且默认均有一个option标签,value值为“请选择”

2)除引入jq文件外,还需引入demo中的area.jsselect.js

3)area.js为省市区数据源文件,因通过json文件获取数据在jq库中无法查看效果,所以我这里用的是js文件来存放地区数据

4)select.js为具体操作的代码,如果嫌js文件多,可将select.js中的内容放到area.js的后边。这样只需引入一个js文件

5)这里只是写了一个简单的demo,没有做什么美化处理。需要的话大家可通过css自行添加

6)demo自测到IE5,功能正常,所以兼容到IE5不成问题

7)该文件只是一个简单的demo。如有什么可优化的地方,烦请大家留言。多多指教!谢谢

相关插件-选择框

jQuery无限级联动下拉选择插件

无限级联下拉选择器,可以随意配置级联数量,没有上限,最小一个。jquery插件形式。数据结构简单。简单易用,快速上手。
  选择框
 25939  229

vue选择检索国家页面模板(原创)

vue.js基于json异步调用可选择并且可以通过国家名称和手机区号进行检索相应的国家,并且有中文、日语、英语、越南语、韩语、五种语言,这些语言的显示是根据游览器语言而定。代码比较容易理解,用起来很方便。(支持多语言自适应手机和网站)
  选择框
 24658  271

css3自定义单选多选框框css3checkbox

css3自定义单选框,多选框好看实用
  选择框
 37013  381

Combobox 下拉插件(原创)

基于 jQueryUI的下拉插件combobox.js
  选择框
 34608  338

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    一只猫. 0
    2020/3/11 13:19:50
    如何让一个页面 让两个插件联动呢 回复
    盛气凌人 0
    2019/1/15 16:00:02
    如何设置默认省市,你这也没有啊!
        lzc1234561
        2019/6/12 20:58:33
        在placeolder这个属性设置;
        例如placeolder="北京市"
    回复
    Nicholas_B 0
    2018/9/17 19:25:40
    沈斌 0
    2018/3/7 11:24:37
    js 如何取到编码。。。。取不到 回复
    样一开 0
    2017/12/1 15:23:32
    放在bootstrap里会失效,需要做个包装,把select.js里的代码包装在一个函数里,在自己的代码里调用下就好了
    $(document).ready(function () {initCityPick();});
    回复
    小梦梦 0
    2017/11/16 13:19:58

    只有省的下拉能出来,区和县都出不来

        sphenix0
        2018/12/7 15:16:11
        我的也是这个问题呀
        JavaScript0
        2019/3/18 14:34:35
        可能是引入的jq的文件版本太低
    回复
    小梦梦 0
    2017/11/16 13:19:05
    Only 0
    2017/11/5 16:05:28

    怎么用

        枫落无尘0
        2018/3/20 15:12:13
        把三个script都放在最后面,和那个demo一样才行,我弄了一天弄出来了
    回复
    三分钟热度, 0
    2017/10/26 10:57:50

    下拉框没有值杂回事

        暗裔剑魔0
        2017/11/20 20:27:54

        显示不出来,是因为这个插件要放到页面底部

    回复
    泪殇 0
    2017/9/13 18:37:19

    select追加以后,下拉就没用了怎么

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复