H5手机移动端省市区联动城市选择器插件

来源:https://www.sucaihuo.com/js/4635.html 2019-08-13 11:29浏览(1951) 收藏

一款不错的H5手机移动端省市区联动城市选择器插件,可分别选择一二三级联动效果。
H5手机移动端省市区联动城市选择器插件
分类:表单代码 > 城市选择 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script src="./city.js"></script>
<script src="./picker.min.js"></script>
<script>
    // 选择器
    function picker1() {
        var nowValue = document.getElementById('nowValue');
        new Picker({
            "title": '请选择',//标题(可选)
            "defaultValue": nowValue.value,//默认值(可选)
            "type": 1,//需要联动级数[1、2、3](可选、不传时默认获取数据的深度,最多3级)
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传,id、text、data)
            "callBack": function (val) {
                //回调函数(val为选择的值)
                nowValue.value = val;
            }
        });
    };

    function picker2() {
        var nowValue = document.getElementById('nowValue');
        new Picker({
            "title": '请选择',//标题(可选)
            "defaultValue": nowValue.value,//默认值-多个以空格分开(可选)
            "type": 2,//需要联动级数[1、2、3](可选)
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传,id、text、data)
            "callBack": function (val) {
                //回调函数(val为选择的值)
                nowValue.value = val;
            }
        });
    };

    function picker3() {
        var nowValue = document.getElementById('nowValue');
        new Picker({
            "title": '请选择',//标题(可选)
            "defaultValue": nowValue.value,//默认值-多个以空格分开(可选)
            "data": cityData,//数据(必传)
            "keys": {
                "id": "Code",
                "value": "Name",
                "childData": "level"//最多3级联动
            },//数组内的键名称(必传,id、text、data)
            "callBack": function (val) {
                //回调函数(val为选择的值)
                nowValue.value = val;
            }
        });
    }
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2