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

最新推荐文章于 2023-12-11 15:13:41 发布

maxiaole_z

最新推荐文章于 2023-12-11 15:13:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/maxiaole_z/article/details/105927502

本文详细介绍如何使用Chosen插件加载动态数据，实现多选与单选功能，并演示逐字筛选与选项回显技巧，包括初始化设置、动态更新选项及响应用户选择变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1) chosen加载ajax动态数据

<div class="col-xs-6 col-sm-6 col-md-3 mb15">
  <div class="form-group">
    <label class="control-label col-xs-4"><span style="color: red;">*</span>直播间ID：</label>
      <div class="col-xs-8">
        <select data-placeholder="请选择直播间" data-no_results_text="暂时没有搜索到内容："class="select" tabindex="1" style="width:100%;height:40px;line-height:40px;" name="liveRoomNum" id="liveRoomNum"  value="">
	     </select>
       </div>
     </div>
   </div>

$(function(){
    initLiveroom();
	$('.select').chosen();//初始化直播间*重要：有数据，不写这句样式就是普通的select
})
//初始化直播间
function initLiveroom() {
	$.ajax({
		url : '******',
		type : 'POST',
		async : true,
		cache : false,
		dataType : 'json',
		data : {},
		processData : false,
		contentType : false,
		success : function(data) {
			if (data.success) {
				newStreamerList = data.result;
				console.log(newStreamerList);
				$("#liveRoomNum").empty();
				$("#liveRoomNum").val("").trigger("chosen:updated");
				var length = newStreamerList.length;
				$("#liveRoomNum").append("<option value=''>请选择直播间</option>");
				for (i = 0; i < length; i++) {
					if(newStreamerList[i].liveState=="10"){
						$("#liveRoomNum").append("<option value='" + newStreamerList[i].id + "'>"+ newStreamerList[i].name+"("+newStreamerList[i].userCode +")"+"--已禁用"+ "</option>");
					}else{
						$("#liveRoomNum").append("<option value='" + newStreamerList[i].id + "'>"+ newStreamerList[i].name+"("+newStreamerList[i].userCode +")"+ "</option>");
					}
				}
				$("#liveRoomNum").trigger("chosen:updated");
			}
		},
	});
}

2）多选+逐字筛选回显

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

页面样式

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

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