Bootstrap js动态给select添加option元素不显示

NoahCode

于 2019-01-28 18:19:41 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Problems 文章标签： Bootstrap select problem 动态添加

本文链接：https://blog.youkuaiyun.com/NoahCode/article/details/86681148

Problems 专栏收录该内容

1 篇文章

订阅专栏

在使用Bootstrap的Select组件时，通过JS动态添加option元素后无法立即显示的问题得到解决。文章详细介绍了如何通过调用selectpicker的'refresh'和'render'方法来实时更新select选项，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题起因

本人在使用Bootstrap过程中，用js动态给select元素添加option元素时没有显示，在for循环获取option数据时，是能获取的，但是就是显示不出来，只有当人为的去刷新此页面后才可以显示，这对用户来说很不友好，故从网上查找解决办法。

解决方法

在获取完option数据后添加以下两句，即可在进行数据的更改后可以更新select选项

//要以编程方式更新JavaScript的选择，首先操作选择，然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。
$('#parent').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局，这将非常有用。
$('#parent').selectpicker('render');