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;
}