Bootstrap 的select控件怎么选中或是异步刷新。

最新推荐文章于 2021-05-08 11:06:59 发布

茉莉花茶

最新推荐文章于 2021-05-08 11:06:59 发布

阅读量9.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery bootstrap 文章标签： bootstrap select chosen 异步

本文链接：https://blog.youkuaiyun.com/zhaoyingjiao/article/details/41980791

jQuery 同时被 2 个专栏收录

12 篇文章

订阅专栏

bootstrap

2 篇文章

订阅专栏

在使用Bootstrap框架时，遇到需要异步更新Select控件的情况，如添加<option>或选中特定值，可能会遇到前端显示与实际值不符的问题。通过尝试网上方法，包括移除'selected'属性并触发'liszt:updated'事件，或者使用removeChosen和chosen方法，可以解决这个问题，但这些方法操作相对繁琐。

在异步刷新需要更新某个Bootstrap框架的Select控件，为其添加一个<option>，或是重新选中某个值时，会发现隐藏的select框的值修改了，但是前面显示选中的值还是不变，就需要用下面的方法。

先前在网上搜了好久，试了这篇文章里（点击打开链接)的两种方法，虽然实现了，但是很繁琐。

1. 通过$(this).removeAttr('selected'), 然后用$().trigger('liszt:updated'),就能把前端的代码改变了。

$("#mdisplaychart").find("option").each(function(){
                $(this).removeAttr("selected");
            });
            $("#mdisplaychart").find("option").each(function(){
                if(key == $(this).val()){
                   $(this).attr("selected","selected");
                   return false;
                }
            });
            $("#mdisplaychart").trigger("liszt:updated");
            $("#mdisplaychart").val(key);

2. 通过removeChosen()和chosen() 这两个方法可以实现。

$("#roadmapYearSelect").removeChosen();
                    $("#roadmapYearSelect").append("<option value=''>"+dropDrownInitValue+"</option>" + data);
                    $("#roadmapYearSelect").chosen();