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

最新推荐文章于 2023-02-17 18:14:27 发布

原创最新推荐文章于 2023-02-17 18:14:27 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #select #problem #动态添加

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');