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无限级联动下拉选择插件

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

jQuery移动端自定义select插件Ansel

Ansel自定义手机浏览器重置下拉选择带搜索
  选择框
 45032  330

移动端pc端地区选择插件

兼容移动端的地区选择插件
  选择框
 41062  334

jQuery多选带搜索

input多选搜索样式用的layui.css不喜欢的可自己调。其他JQ
  选择框
 36186  324

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

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