前端 pickerview 的效果 实现 省市区 三级联动

效果图

需要引入 大佬写的js 以及 css 源文件里面有大佬的地址

这是我存在gitee上的文件

https://gitee.com/depressiom/address-pickview-effect.git

<div class="weui-cells" style="margin: 0px;line-height: 60px;">
            <div class="weui-cell weui-cell_select weui-cell_select-after clo_l">
                <div class="weui-cell__hd">
                    <label  class="weui-label clo_title">省/市/区</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input clo_text" pattern="" type="text" @click="selectArea" id="selectArea" name="city" placeholder="请输入所在地区" v-model="areas" readonly>
                </div>
            </div>
        </div>

  // 选择地址
            selectArea(){
                // 地址三级联动
                weui.picker(cityData3, {
                    //设置默认展示代码
                    defaultValue: ["110000", "110100", "110101"],
                    // 点击确定后
                    onConfirm: function (result) {
                        var str = "";
                        var cityArr = [];
                        result.map(function (i, val) {
                            str += i["label"] + ' '; // 获取文字
                            cityArr.push(i["value"]);
                        });
                        $("#selectArea").val(str);
                        areas = str ;
                        provinceCode = cityArr[0]; // 省级代码
                        cityCode = cityArr[1];  // 市级代码
                        areaCode = cityArr[2];  // 区县代码
                        $("#selectArea").attr("cityArr", cityArr);
                    }
                })
            },

很多时候都是站在巨人的肩膀上，很感谢搜索引擎上面的各种大佬 疑难解答