jquery mPicker.js手机端省市区选择插件-BFW插件库

jquery mPicker.js手机端省市区选择插件
第一步引入bfwone
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|json.mpicker.data&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        //获取value
        function getVal() {
            var value1 = $('.select-value1').data('value1');
            var value2 = $('.select-value1').data('value2');
            var result = '';
            value1 = value1 || '';
            value2 = value2 || '';
            if (value1) {
                result = value1;
            }
            if (value2) {
                result = result+'-'+ value2;
            }
            return {
                value: [value1, value2],
                result: result
            };
        }
        bready(function() {
            use(["mPicker.min", "mpicker"], function() {

                /**
                * 联动的picker
                * 三级
                */
                $('.select-value').mPicker({
                    level: 3,
                    dataJson: city3,
                    Linkage: true,
                    rows: 6,
                    idDefault: true,
                    splitStr: '-',
                    header: '<div class="mPicker-header">三级联动选择插件</div>',
                    confirm: function(json) {
                        console.info('当前选中json：', json);
                        console.info('【json里有不带value时】');
                        console.info('选中的id序号为：', json.ids);
                        console.info('选中的value为：', json.values);
                        // var id1= $('.select-value').data('id1');
                        // var id2 = $('.select-value').data('id2');
                        // var id3 = $('.select-value').data('id3');
                        // console.info('第一列json：',city3[id1]);
                        // console.info('第二列json：', city3[id1].child[id2]);
                        // console.info('第三列json：', city3[id1].child[id2].child[id3]);
                    },
                    cancel: function(json) {
                        console.info('当前选中json：', json);
                    }
                })
                //获取mpicker实例
                var method = $('.select-value').data('mPicker');
                console.info('第一个mpicker的实例为：', method);
                //mpicker方法
                // method.showPicker();
                // method.hidePicker(function(){
                //     console.info(this)
                // });

                /**
                * 联动的picker--添加修改后修改数据的效果
                * 两级
                */
                $('.select-value1').mPicker({
                    level: 2,
                    dataJson: dataJson,
                    Linkage: true,
                    rows: 6,
                    idDefault: true,
                    splitStr: '-',
                    header: '<div class="mPicker-header">两级联动选择插件</div>',
                    confirm: function (json) {
                        console.info('当前选中json：', json);
                        var _this = this;
                        console.info('【json里有带value的情况】');
                        //更新json
                        console.info('3s后更新json...');
                        setTimeout(function() {
                            _this.container.data('mPicker').updateData.call(_this, level3);
                            var json = getVal();
                            var valArr = json.value;
                            console.info('更新成功!!');
                            console.info('更新后的value为空', valArr[0], valArr[1]);
                            console.info('更新后的value拼接值为空', json.result);
                        }, 3000);

                    },
                    cancel: function (json) {}
                })


                /**
                * 不联动的picker
                * 两级
                */
                var method2 = $('.select-value2').mPicker({
                    level: 2,
                    dataJson: level3,
                    rows: 5,
                    Linkage: false,
                    header: '<div class="mPicker-header">非联动选择插件</div>',
                    idDefault: true,
                    confirm: function(json) {
                        console.info('当前选中json：', json);
                    }
                })

                /**
                * 一级
                */
                var method3 = $('.select-value3').mPicker({
                    level: 1,
                    dataJson: dataJson,
                    Linkage: false,
                    rows: 6,
                    idDefault: true,
                    header: '<div class="mPicker-header">单级选择</div>',
                    confirm: function(json) {
                        console.info('当前选中json：', json);
                    },
                    cancel: function(json) {
                        console.info('当前选中json：', json);
                    }
                })

            });
        });
    </script>
</head>
<body>
    <div class="slide-wapper">
        <div class="slide-item">
            <div class="console"></div>
            <h4>调试查看选择的数据，请打开控制台看输出信息</h4>
            <br>
            <h4>三级城市联动选择</h4>
            <input type="text" class="select-value form-control" value="广东省-东莞市">
            <br>
            <h4>二级城市联动选择</h4>
            <input type="text" class="select-value1 form-control" value="广东省-东莞市">
            <br>
            <h4>二级非联动选择</h4>
            <div class="select-input2">
                <input type="text" class="select-value2 form-control" value="收到额外人 饿的方式度过333">
            </div>
            <br>
            <h4>单级选择</h4>
            <input type="text" class="select-value3 form-control" value="">
            <br><br>

        </div>
    </div>
</body>
</html>
jquery mPicker.js手机端省市区选择插件

网友评论0

colpick.js

jcdate.js

laydate.js

PCASClass.js

distpicker.js

mPicker.js

calendar.js

jquery.range.js

Mdate.js

dateRange.js
