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

在使用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');

感谢 ypp91zr 这位博主,他解决此问题的原本在此链接:bootstrap js动态给select添加option元素 不展示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值