不是第一

bootstrap-select

<head>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap-select.css">
	<script src="../assets/jquery.js"></script>
	<script src="../bootstrap/js/bootstrap.bundle.js"></script>
	<script src="../bootstrap/dist/js/bootstrap-select.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<button class="button primary" onclick="getAll()">获取选择的</button>
			<!-- /*
multiple : 多选
data-live-search="true" : 是否开启搜索功能
data-actions-box="true" : 是否开启全选功能
data-max-options="5" : 设置对多选中2个
data-selected-text-format="count > 3" ：
 <! -- data-selected-text-format="count > 3" - ->
 缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效
*/ -->
			<select class="selectpicker col-6" id="sel" title="请选择" multiple data-live-search="false"
				data-actions-box="true" data-max-options="5">
				<option value="1">系统管理员</option>
				<option value="2">销售</option>
				<option value="3">客户经理</option>
				<option value="4">技术经理</option>
				<option value="5">人事</option>
			</select>

		</div>
	</div>
	<script>
		function getAll() {
			var value = $('#sel').val();
			//如果是多选，这里得到的value变量是一个数组变量，形如 ['1','2','3']
			console.log(value)
			initSel()
		}

		async function initSel() {
			const daarr = await getDt();
			$("#sel").empty();
			daarr.forEach(element => {
				$("#sel").append("<option value=" + element + " >" + element + "</option>");
			});
			// $("#sel").append("<option value="+json[index].id+" >"+json[index].name+"</option>" );
			$('#sel').selectpicker('refresh'); //刷新下才会生效
		}

		function getDt() {
			let dataStr = '但如果，你提交，数据时将表，单序列化，个有更多的空，有足够，的空间可以正，常完全打开，但是上面，变成了一个下';
			let daarr = dataStr.split('，');

			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(daarr);
				}, 2000);
			})
		}

		/*
	
	$(function (){
 		//这里就使用ajax请求获取数据，拼装到<select>标签下
        $.ajax({
            url: "test/list",
            method: "get",
            success: function (data){
                $("#sel").empty();
                var json=eval(data.data);
                $.each(json,function(index,item){
                    $("#sel").append("<option value="+json[index].id+" >"+json[index].name+"</option>" );
                });
                $('#sel').selectpicker('refresh');//刷新下才会生效
            }
        })
    })
		*/



</script>

API

         .selectpicker('val')
// 您可以通过调用元素上的val方法来设置所选值。
        $('.selectpicker').selectpicker('val', 'Mustard');
        $('.selectpicker').selectpicker('val', ['Mustard','Relish']);
// 编辑时回填使用：
    {# 回填数据，typeof Arr 为选中项value的值#}
    $("#tester").selectpicker('val', ['typeof' ,'Arr' ]);
    $("#tester").selectpicker('refresh');

.selectpicker('setStyle')
// 修改与按钮本身或其容器关联的类。

// 如果更改容器上的类：

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

//如果更改按钮上的类（更改数据样式）：

// Replace Class$('.selectpicker').selectpicker('setStyle', 'btn-danger');
// Add Class$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
// Remove Class$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

.selectpicker('refresh')

//要以编程方式使用JavaScript更新选择，请先操作select，然后使用refresh方法更新UI以匹配新状态。
//  在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

$('.selectpicker').selectpicker('refresh');