weui 日期插件以及省市区三级联动

最新推荐文章于 2022-10-26 16:44:26 发布

原创最新推荐文章于 2022-10-26 16:44:26 发布 · 4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#weui #省市区三级联动

js 专栏收录该内容

28 篇文章

订阅专栏

博客展示了省市区三级联动的效果图，涉及weui相关内容，聚焦信息技术领域中前端交互效果的呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

jQuery WeUI

个人资料

性别

日期

职业

区域

<script src="js/jquery-weui.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        .weui-label {
            width: 70px;
        }
        body, html {
            height: 100%;
            -webkit-tap-highlight-color: transparent;
        }
        .demos-title {
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            margin: 0.7rem;
        }


        footer {
            text-align: center;
            font-size: 14px;
            padding: 20px;
        }

        footer a {
            color: #999;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">


</head>

<body>
    <header>
        <h4 class="demos-title">个人资料</h4>
    </header>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="sex" type="text" value="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="date" type="text">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">职业</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="mobile" type="text" value="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label  class="weui-label">区域</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="end" type="text" value="">
        </div>
    </div>



<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
<script src="js/citys-index.js"></script>


<script>
    var arr= [
        {
            title: "教师",
            value: "001",
        },
        {
            title: "工人",
            value: "002",
        },
        {
            title: "教师",
            value: "003",
        },
    ]
    $("#mobile").select({
        title: "选择手机",
        items:arr,
        onChange: function(d) {
            console.log(d);
            console.log(d.values)
        }
    });
    $("#end").cityPicker({
        title: "选择目的地",
        onChange: function (picker, values, displayValues) {
            console.log(values, displayValues);
        }
    });
    $("#date").calendar({
        onChange: function (p, values, displayValues) {
            console.log(values, displayValues);
        }
    });
</script>
</body>
</html>
--------------------------
//citys-index.js
// jshint ignore: start

// jshint ignore: end

/* global $:true */
/* jshint unused:false*/

+ function ($) {
    "use strict";

    var defaults;
    var raw = []
    var that = this
    $.ajaxSetup({
        async: false
    });
    //向后台获取省市区信息
    $.post("/common/RegionAPI/GetALLRegion", {},function (result) {
        raw=result
    });
    //我这边的数据格式是这样的，js代码中需要根据数据格式做调整
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191101121947608.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM0MDUxNA==,size_16,color_FFFFFF,t_70)

    var format = function (data) {
        var result = [];
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            if (/^请选择|市辖区/.test(d.Name)) continue;
            result.push(d);
        }
        if (result.length) return result;
        return [];
    };

    var Sub = function (data) {
        if (!data.Sub) return [{ Name: '', Id: data.Id }];  // 可能某些县级市没有区
        return format(data.Sub);
    };

    var getCities = function (d) {
        for (var i = 0; i < raw.length; i++) {
            if (raw[i].Id === d || raw[i].Name === d) return Sub(raw[i]);
        }
        return [];
    };

    var getDistricts = function (p, c) {
        for (var i = 0; i < raw.length; i++) {
            if (raw[i].Id === p || raw[i].Name === p) {
                for (var j = 0; j < raw[i].Sub.length; j++) {
                    if (raw[i].Sub[j].Id === c || raw[i].Sub[j].Name === c) {
                        return Sub(raw[i].Sub[j]);
                    }
                }
            }
        }
    };

    var parseInitValue = function (val) {
        var p, c, d;
        var tokens = val.split(' ');
        raw.map(function (t) {
            if (t.Name === tokens[0]) {
                p = t
            };
        });

        p.Sub.map(function (t) {
            if (t.Name === tokens[1]) c = t;
        })
        if (tokens[2]) {
          
            c.Sub.map(function (t) {
                if (t.Name === tokens[2]) d = t;
            })
        }
        
        if (d) return [p.Id, c.Id, d.Id];
        return [p.Id, c.Id];
    }

    $.fn.cityPicker = function (params) {
        params = $.extend({}, defaults, params);
        return this.each(function () {
            var self = this;

            var provincesName = raw.map(function (d) {
                return d.Name;
            });
            var provincesCode = raw.map(function (d) {
                return d.Id;
            });
            var initCities = Sub(raw[0]);
            var initCitiesName = initCities.map(function (c) {
                return c.Name;
            });
            var initCitiesCode = initCities.map(function (c) {
                return c.Id;
            });
            var initDistricts = Sub(raw[0].Sub[0]);

            var initDistrictsName = initDistricts.map(function (c) {
                return c.Name;
            });
            var initDistrictsCode = initDistricts.map(function (c) {
                return c.Id;
            });

            var currentProvince = provincesName[0];
            var currentCity = initCitiesName[0];
            var currentDistrict = initDistrictsName[0];

            var cols = [
                {
                    displayValues: provincesName,
                    values: provincesCode,
                    cssClass: "col-province"
                },
                {
                    displayValues: initCitiesName,
                    values: initCitiesCode,
                    cssClass: "col-city"
                }
            ];

            if (params.showDistrict) cols.push({
                values: initDistrictsCode,
                displayValues: initDistrictsName,
                cssClass: "col-district"
            });

            var config = {

                cssClass: "city-picker",
                rotateEffect: false,  //为了性能
                formatValue: function (p, values, displayValues) {
                    return displayValues.join(' ');
                },
                onChange: function (picker, values, displayValues) {
                    var newProvince = picker.cols[0].displayValue;
                    var newCity;
                    if (newProvince !== currentProvince) {
                        var newCities = getCities(newProvince);
                        newCity = newCities[0].Name;
                        var newDistricts = getDistricts(newProvince, newCity);
                        picker.cols[1].replaceValues(newCities.map(function (c) {
                            return c.Id;
                        }), newCities.map(function (c) {
                                return c.Name;
                        }));
                        if (params.showDistrict) picker.cols[2].replaceValues(newDistricts.map(function (d) {
                            return d.Id;
                        }), newDistricts.map(function (d) {
                                return d.Name;
                        }));
                        currentProvince = newProvince;
                        currentCity = newCity;
                        picker.updateValue();
                        return false; // 因为数据未更新完，所以这里不进行后序的值的处理
                    } else {
                        if (params.showDistrict) {
                            newCity = picker.cols[1].displayValue;
                            if (newCity !== currentCity) {
                                var districts = getDistricts(newProvince, newCity);
                                picker.cols[2].replaceValues(districts.map(function (d) {
                                    return d.Id;
                                }), districts.map(function (d) {
                                        return d.Name;
                                }));
                                currentCity = newCity;
                                picker.updateValue();
                                return false; // 因为数据未更新完，所以这里不进行后序的值的处理
                            }
                        }
                    }
                    //如果最后一列是空的，那么取倒数第二列
                    var len = (values[values.length - 1] ? values.length - 1 : values.length - 2)
                    $(self).attr('data-Id', values[len]);
                    $(self).attr('data-codes', values.join(','));
                    if (params.onChange) {
                        params.onChange.call(self, picker, values, displayValues);
                    }
                },

                cols: cols
            };

            if (!this) return;
            var p = $.extend({}, params, config);
            //计算value
            var val = $(this).val();
            if (!val) val = '北京 北京市 东城区';
            currentProvince = val.split(" ")[0];
            currentCity = val.split(" ")[1];
            currentDistrict = val.split(" ")[2];
            if (val) {
                p.value = parseInitValue(val);
                if (p.value[0]) {
                    var cities = getCities(p.value[0]);
                    p.cols[1].values = cities.map(function (c) {
                        return c.Id;
                    });
                    p.cols[1].displayValues = cities.map(function (c) {
                        return c.Name;
                    });
                }

                if (p.value[1]) {
                    if (params.showDistrict) {
                        var dis = getDistricts(p.value[0], p.value[1]);
                        p.cols[2].values = dis.map(function (d) {
                            return d.Id;
                        });
                        p.cols[2].displayValues = dis.map(function (d) {
                            return d.Name;
                        });
                    }
                } else {
                    if (params.showDistrict) {
                        var dis = getDistricts(p.value[0], p.cols[1].values[0]);
                        p.cols[2].values = dis.map(function (d) {
                            return d.Id;
                        });
                        p.cols[2].displayValues = dis.map(function (d) {
                            return d.Name;
                        });
                    }
                }
            }
            $(this).picker(p);
        });
    };

    defaults = $.fn.cityPicker.prototype.defaults = {
        showDistrict: true //是否显示地区选择
    };

}($);