2018-07-03-layer-layui的select更改选项后使用form.render()并没能够刷新所选择的元素

问题:select更改选项后,使用form.render();并没能够刷新所选择的元素。

在进入页面后会访问服务端加载一些数据,然后根据数据去更改下拉框的选项,第一次加载是对的,而后续加载下拉框的选择就是错误的了。代码如下:

$("#payType").find('option').attr("selected", false);
$("#payType").find('option[value="' + model.payType + '"]').attr("selected", true);
form.render();

如下页面,支付类型中"未现付"虽然是selected,但是在其后跟随的div中,layui-this的样式仍然在"现付"选项上:

图1

为什么select中已经选择了“未现付”并且也已经调用了form.render()了但结果不是期望的?初步估计是不是form.render()没有起效果?所以修改代码,其中手动去修改div中的样式,并且在2秒后再调用form.render(),代码如下:

$("#payType").find('option').attr("selected", false);
$("#payType").find('option[value="' + model.payType + '"]').attr("selected", true);

var $selectDiv = $("#payType + div");
$selectDiv.find("dl dd").removeClass("layui-this");
var $selectDD = $selectDiv.find('dl dd[lay-value="' + model.payType + '"]');
$selectDD.addClass("layui-this");
$selectDiv.find("div input").val($selectDD.text());

setTimeout(function() {
    console.log("xxx");
    form.render();
}, 2000);

更改后在form.render()之前是对的,如下:

图2

而在2秒后触发setTimeout中的form.render()之后反而变成错的了,如下:

图3

看来不是form.render()没有执行而且里面有bug吧?所以暂时的解决方案是不使用form.render(),而是如上直接另写代码使选择框成为正常的状态。

对于radio也是有同样的问题,但是因为radio只能有一个选中,所以使用click()事件就可以了。

$("#multiCheckbox").find('input[value="' + model.payWay + '"]').click();

但是对于checkbox,估计也是要另写代码了。这样感觉挺困扰的,本来是用框架就是要快速构建,反而因为复选框的问题要去调。

后续版本应该会更新吧? >_<

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值