前端–jQuery clone()的select元素不能修改option里的文本(此时的change()方法失效了!!!!)

问题背景:

近期对部门内的资产申请功能进行优化,此前是只能一笔笔的申请显得麻烦,所以想改成可以多笔批量申请。使用JQuery对默认显示的一行进行Clone(),而里面包含了需要选择地点和设备的select框。于是故障出现了,当点击新增一行按钮的时候,内容显示正常,当更改option内容的时候,value值始终保持不变,一直保持默认,这个问题折磨了我2天的时间,头铁的发麻!

故障分析及原因:

在排错的过程中,发现默认行加载了bootstrap-select.js加载完成,而clone行的select并没加载这个js,于是做了手动添加$.getScript(url);重新调试时,bootstrap-select.js进行了加载,但是并没有作用在元素上,表示追加的bootstrap-select.js无效。经过多方面的查阅资料和求助,发现select,textarea的值在clone的时候会被丢掉。

image

解决方案:

现将select动态加载的数据清空,然后再进行再次加载。此时重新测试时,发现每行都出现了2个相同如下div:

<div class="btn-group bootstrap-select form-control"></div>

将类名为bootstrap-select的div隐藏一个。最终解决代码如下:

$('.selectpicker').data('selectpicker', null);
$('.bootstrap-select').css("display","none");
$('.selectpicker').selectpicker();