解决三级联动组件第一次不能正常显示的bug

 原html代码:

<div data-toggle="distpicker" class="form-group row">
                <label for="addressPro" class="col-sm-2 col-form-label">省:</label>
                <div class="col-sm-2">
                    <select id="addressPro" class="form-control" data-province="———选择省———"></select>
                </div>

                <label for="addressCity" class="col-sm-1 col-form-label">市:</label>
                <div class="col-sm-2">
                    <select id="addressCity" class="form-control" data-city="———选择市———"></select>
                </div>

                <label for="addressCountry" class="col-sm-1 col-form-label">区:</label>
                <div class="col-sm-2">
                    <select id="addressCountry" class="form-control" data-district="———选择区———"></select>
                </div>
            </div>

需要删除data-属性,并给最外层div加id

<div id="distpicker" class="form-group row">
                <label for="addressPro" class="col-sm-2 col-form-label">省:</label>
                <div class="col-sm-2">
                    <select id="addressPro" class="form-control"></select>
                </div>

                <label for="addressCity" class="col-sm-1 col-form-label">市:</label>
                <div class="col-sm-2">
                    <select id="addressCity" class="form-control"></select>
                </div>

                <label for="addressCountry" class="col-sm-1 col-form-label">区:</label>
                <div class="col-sm-2">
                    <select id="addressCountry" class="form-control"></select>
                </div>
            </div>

然后在页面对应的js修改

原函数:

var init = function () {
                if (isUpdate()) {
                    var tempdata = JSON.parse(localStorage.getItem("rowData"));
                    $("#name").val(tempdata.name);
                    $("#areaCoverd").val(tempdata.areaCoverd);
                    $("#processingType").val(tempdata.processingType);
                    $("#contacts").val(tempdata.contacts);
                    $("#addressPro").attr('data-province',tempdata.addressPro);
                    $("#addressCity").attr('data-city',tempdata.addressCity);
                    $("#addressCountry").attr('data-district',tempdata.addressCountry);
                    $("#address").val(tempdata.address);
                    $("#phone").val(tempdata.phone);
                    $(".w-e-text").html(tempdata.intruduce);
                    itemcode = tempdata.itemcode
                    uploadImg.setImgSrc(tempdata.filePath)
                }
                init = function () {

                }
            };
            init();

修改成:

var init = function () {
                if (isUpdate()) {
                    var tempdata = JSON.parse(localStorage.getItem("rowData"));
                    $("#name").val(tempdata.name);
                    $("#areaCoverd").val(tempdata.areaCoverd);
                    $("#processingType").val(tempdata.processingType);
                    $("#contacts").val(tempdata.contacts);
                    $("#distpicker").distpicker({
                        province: tempdata.addressPro,
                        city: tempdata.addressCity,
                        district: tempdata.addressCountry
                    });
                    $("#address").val(tempdata.address);
                    $("#phone").val(tempdata.phone);
                    $(".w-e-text").html(tempdata.intruduce);
                    itemcode = tempdata.itemcode;
                    uploadImg.setImgSrc(tempdata.filePath)
                }else {
                    $("#distpicker").distpicker();//新增页面使用
                }
                init = function () {

                }
            };
            init();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值