要更改动态创建的bootstrap-select的选定值,可以通过以下步骤实现:
val()
,它接受一个参数,即要设置的选定值。可以将新的选定值作为参数传递给val()
方法。refresh()
方法来刷新bootstrap-select。该方法会重新渲染下拉列表,显示新的选定值。下面是一个示例代码,演示如何更改动态创建的bootstrap-select的选定值:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0/dist/css/bootstrap-select.min.css">
</head>
<body>
<select class="selectpicker" id="mySelect" data-live-search="true">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0/dist/js/bootstrap-select.min.js"></script>
<script>
// 创建bootstrap-select实例
var select = $('#mySelect').selectpicker();
// 更改选定值为Option 2
select.val('2');
// 刷新bootstrap-select
select.selectpicker('refresh');
</script>
</body>
</html>
在上述示例中,首先引入了必要的CSS和JavaScript文件。然后,创建了一个带有选项的bootstrap-select下拉列表。通过选择器$('#mySelect')
获取到bootstrap-select实例,并使用val('2')
方法将选定值更改为"Option 2"。最后,使用selectpicker('refresh')
方法刷新bootstrap-select,以显示新的选定值。
请注意,上述示例中使用的是Bootstrap 5和Bootstrap-select 1.14.0版本。如果使用其他版本,可能需要相应调整引入的文件和方法名称。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云