PC省市区级联选择器(原创)

所属分类:输入-选择框

分享到微信朋友圈
X
PC省市区级联选择器(原创) ie兼容12

更新时间:2024-04-08 22:40:34

基础用法 默认 click 触发子菜单 创建容器 

<input type="text" id="areas" readonly autocomplete="off" placeholder="请选择省/市/区" value="">

利用LayerOpen方法传递数据

function setSelArea() {
    var myLayerOpne = new LayerOpen({
        arrowClick: function({
            name,
            pinyin,
            code,
            label
        }, callback) {
            let list = []
            if (!code) {
                return false;
            }
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                data: {
                    'parent_code': code,
                },
                async: false,
                error: function(data) {},
                success: function(json) {
                    console.log(json);
                    if (json.Code == 200) {
                        console.log(json.Data);
                        for (var i = 0; i < json.Data.length; i++) {
                            if (label === 'province') {
                                let cityList = new Array() cityList['Name'] = json.Data[i].Name cityList['label'] = 'city'
                                cityList['Code'] = json.Data[i].Code list.push(cityList)
                            } else if (label === 'city') {
                                let districtList = new Array() districtList['Name'] = json.Data[i].Name districtList['label'] = 'district'
                                districtList['Code'] = json.Data[i].Code list.push(districtList)
                            }
                        }
                    }
                }
            });
            console.log(name, pinyin, code, label);
            callback(list)
        },
        ele: '#areas',
        initArea: {},
        //默认选中(必传)的地区信息      list: [], 
        // 省份数据-可无需接口      cityList: [], 
        //市区数据-接口获取后请在此填入      districtList: []
        //县数据-接口获取后请在此填入   
    }) $('#areas').click(function(e) {
        myLayerOpne.init()
    })
}


相关插件-选择框

jQuery移动端地区选择插件

这是一个只适用移动端的三级联动插件
  选择框
 35342  320

div模拟radio和checkbox

简单实用的自定义radio和checkbox
  选择框
 27862  290

手机端省市县三级联动

jQuery手机端省市县联动
  选择框
 31683  343

jQuery下拉框美化插件

表单的一些元素是很难或不能设置样式的,所以有些时候它们的默认样式可能会与你的设计格格不入,这时候也许美化插件是个不错的选择。
  选择框
 37543  379

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

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