selectpicker用法
引入CSS，JS文件
bootstrap.min.css
bootstrap-select.min.css
jquery-3.7.0.min.js
bootstrap.bundle.min.js
bootstrap-select.min.js
<!-- CSS --> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<!-- jQuery and JavaScript Bundle with Popper --> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<body>
<div class="col-md-4 ceshi" style="padding:0;">
<select id="selectSf" class="selectpicker hehe" multiple data-hide-disabled="true" data-size="5"
data-live-search="false">
<option value="00000000" selected="">alphabet</option>
<option value="10000000">aa</option>
<option value="20000000">bbb</option>
<option value="20000000">cccc</option>
<option value="30000000">ddddd</option>
<option value="40000000">eeeeee</option>
</select>
</div>
<div class="ceshi2">
</div>
<button class="add">添加</button>
</body>
<script>
//动态添加selectpicker控件
$(function () {
$('.add').click(function () {
var div = $('.ceshi select').clone(); //克隆selectpicker控件
$('.ceshi2').html(div); //添加到ceshi2下面
var char = '';
char += "<option value='11111'>jjjjjj</option>"; //动态新增option选项
char += "<option value='22222'>kkkk</option>";
char += "<option value='33333'>0000</option>";
char += "<option value='44444'>77777</option>";
$('.ceshi2 select').append(char); //添加选项到新增的selectpicker控件
$('.ceshi2 select').selectpicker(); //初始化selectpicker控件
})
})
</script>
获取selectpicker的值
var wk = $('.worker_lst').selectpicker('val');
设置selectpicker的值
$('.worker_lst').selectpicker('val', workers); //workers为数组对象
问题：当jquery使用append添加selectpicker时，会出现重复
<div class="row mt-15 sel_cailiao">
<div class="col-md-5 col-sm-12">
<select class="selectpicker form-control">
<option value="0">请选择材料</option>
<?php foreach($haocai as $k=>$v):?>
<option value="<?php echo $v['id']?>">
<?php echo $v['cname']?>
</option>
<?php endforeach?>
</select>
</div>
<div class="col-md-4 col-sm-12">
<input class="selectpicker form-control mm-form-control" />
</div>
<div class="col-md-3 col-sm-12 mm-buttona">
<a class=" rounded reduce" href="javascript:;">-</a>
<a class=" rounded add" href="javascript:;">+</a>
</div>
</div>
解决方法：
$('.sel_cailiao').on('click', '.add', function () {
var div = $(this).closest('.sel_cailiao').clone();
$(div).find('select.selectpicker').selectpicker('val', 0);
$('#gdxq .modal-body').append(div);
$(div).children().children().children('button').remove();
});
