chosen单选+多选+页面回显，html+js

https://harvesthq.github.io/chosen/

1）多选+逐字筛选回显

html：

<div class="form-group">
    <label class="control-label col-sm-4" for="sort">XXX：</label>
       <div class="col-sm-6">
          <select name="categoryIds" data-placeholder="请选择XXX" class="chosen-    choices" multiple tabindex="4"  id="categoryIds" style="width:100%">
              <#if categoriesList?? && categoriesList?size gt 0>
					<#list categoriesList as r>
                       <option value="${r.id!''}">${r.name!''}</option>
                     </#list>
			  </#if>
		  </select>
        </div>
</div>

js:

不回显，只写： $(".chosen-choices").chosen();  //初始化

// 如果要初始化已选中的项，需要在调用chosen()函数之前调用chose_mult_set_ini()函数
// 设置<select>的<option>属性selected='selected'，这样chosen()函数被调用时，相应项会显示在框中
     chose_mult_set_ini('#categoryIds', '${liveRoomStudioForm.categoryIds!''}');
     $(".chosen-choices").chosen();  //初始化XXXX

     function chose_mult_set_ini(select, values) {
            var arr = values.split(',');
            var length = arr.length;
            var value = '';
            for (i = 0; i < length; i++) {
               value = arr[i];
               $(select + " option[value='" + value + "']").attr('selected', 'selected');
            }
            $(select).trigger("liszt:updated");
        }

页面样式

2）单选+逐字筛选+回显

html：

<div class="form-group">
   <label class="control-label col-sm-4" for="userType">主播类型：</label>
     <div class="col-sm-6">
        <select id="userType" name="userType" class="form-control" onchange="changeStreamerType()">
            <#if (liveRoomStudioForm.userType)?exists> 
		      <option value="" <#if liveRoomStudioForm.userType=="">selected</#if>请选择直播类型</option>
		      <option value="00" <#if liveRoomStudioForm.userType=="00">selected</#if>>社区店店长</option>
		      <option value="10" <#if liveRoomStudioForm.userType=="10">selected</#if>>供应商</option>
             </#if>
         </select>
	  </div>
</div>



<div class="form-group">
  <label class="control-label col-sm-4" for="userId">XXX：</label>
    <div class="col-sm-6">
      <select data-placeholder="请选择XXX" class="select" tabindex="1" style="width:100%;height:40px;line-height:40px;" name="userId" id="userId">
			<#if streamerList?? && streamerList?size gt 0>
				<#list streamerList as r>
                    <option value="${r.id!''}">${r.name!''}</option>
                 </#list>
			</#if>
		</select>
      </div>
 </div>

JS:

chose_single_set_ini('#userId', '${liveRoomStudioForm.userId!''}');
$('.select').chosen();//初始化单选XX
       		 
function chose_single_set_ini(select, value) {
		$(select + " option[value='" + value + "']").attr('selected', 'selected');
		$(select).trigger("liszt:updated");
}

function changeStreamerType(){
	var userType = $("#userType").val();
	var newList = "";
	$.ajax({
		url : '/streamer/findEnableLiveStreamerList.ajax?shopUserType='+userType,
		type : 'POST',
		async : true,
		cache : false,
		dataType : 'json',
		data:{},
		processData : false,
		contentType : false,
		success : function(data) {
			if (data.success) {
			    newList = data.result;
				console.log(newList);
				$("#userId").empty();
				$("#userId").val("").trigger("chosen:updated");
				var length = newList.length;
					for (i = 0; i < length; i++) {
					   $("#userId").append("<option value='"+newList[i].id+"'>"+newList[i].name+"</option>");
						}
					$("#userId").trigger("chosen:updated");	
				}
		},
	});
		return newList;
}