jQuery向select标签 append方法添加 option时值已经改变但页面无变化

最新推荐文章于 2021-10-29 14:28:54 发布

原创最新推荐文章于 2021-10-29 14:28:54 发布 · 7.2k 阅读

2 ·

CC 4.0 BY-SA版权

工作笔记专栏收录该内容

10 篇文章

订阅专栏

本文探讨了在使用jQuery操作DOM时，直接修改现有select元素的option可能导致页面局部不刷新的问题。通过新创建并替换原有select元素的方法，有效地解决了这一难题。

代码：

//获取到select的集合
var selectarr = $('#ee').find('select');
for (var i = 0; i < selectarr.length; i++) {
     var slt_td = $(selectarr[i]);
     slt_td.empty();
     var option = $('<option>请选择</option>');
     slt_td.append(option);
     option = $('<option value="test1">测试1</option>');
     slt_td.append(option);
}

问题总结：原因，在向现有的select标签中，添加option选项时就会出现，页面不局部刷新的情况。

ps:为什么，向现有的select添加时，页面不会变化。本人还需继续学习。（知道后会更新，知道的小伙伴请留言。谢谢）

解决方法：新创建一个select，替换掉原有的即可。

//获取到select的集合
var selectarr = $('#ee').find('select');
for (var i = 0; i < selectarr.length; i++) {
    var slt_td = $(selectarr[i]).parent();
    slt_td.empty();
    var slt = $('<select style="width:170px;"></select>')
    var option = $('<option>请选择</option>');
    slt.append(option);
    option = $('<option value="test1">测试</option>');
    slt.append(option);
    slt_td.append(slt);
}