bootstrap做前端需要实现多选下拉框

首先需要用到一个插件bootstrap-select.min.js，添加以下引用：

bootstrap-select.css

bootstrap-select.min.css

jquery-editable-select.css.css

bootstrap-select.js

bootstrap-select.min.js

页面就是这样

<div class="form-group" id="d_phone">
                        <label class="col-xs-3 control-label">手机号</label>
                         <div class="col-xs-6">
                             <select id="CCustomerPhone" name="CCustomerPhone" class="form-control"  multiple data-live-search="true">
                             </select>
                         </div><span id="s_phone" style="line-height: 34px;color: red"> </span>
                      
                       </div>

var init = "${listPhones}";
if("" !=init ){
	var selectPhone = JSON.parse("${listPhones}");
	for (var i = 0; i < selectPhone.length; i++) {
			$('#CCustomerPhone').append("<option value=" + selectPhone[i] + " selected >" + selectPhone[i] + "</option>"); 
			// 缺一不可  
		    $('#CCustomerPhone').selectpicker('refresh');  
		    $('#CCustomerPhone').selectpicker('render'); 
		}
	}else{
	$('#CCustomerPhone').selectpicker({
		'noneSelectedText': '请选择',
	});
}
	$.ajax({
			
			url : 'server/getSeriesEdition.action',
			type : 'post',
			dataType : 'json',
			data : {
				'custId' : changedCustId,
				'customerIds':customer_ids
			},
			success : function(data, textStatus, jqXHR) {
				if (data.header.status == 100) {
					var status = data.body.status;
					var msg = data.body.msg;
					var dataList = data.body.resultList;
					var soOem = data.body.soOem;
					
					$('#CCustomerPhone').empty();
					var listPhone = data.body.listPhone;
					
					for (var i = 0; i < listPhone.length; i++) {
						var  listpho =  listPhone[i].split("_");
						$('#CCustomerPhone').append("<option value=" + listpho[1] + ">" + listpho[1] + "</option>"); 
						// 缺一不可  
				        $('#CCustomerPhone').selectpicker('refresh');  
				        $('#CCustomerPhone').selectpicker('render'); 
				        
				    }