easyui combobox多选

最新推荐文章于 2022-11-03 16:42:50 发布

原创最新推荐文章于 2022-11-03 16:42:50 发布 · 873 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用EasyUI的ComboBox控件实现多选功能。通过jQuery编写代码，允许用户输入多个条件并以分号分隔，同时支持删除最后一个分号及对应的条件。详细代码实现见正文。

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

最近接触easyui的一些控件，用下拉框要搜索一些数据，以前下拉列表都是写死的，最近要实现动态的并且可以进行多选，网上找了很久都没有自己需要的，然后用jquery写了一个，感觉代码有些麻烦，但是还是实现了。主要功能是：在combobox基础上可以输入多个条件，中间用分号分割。并且当删除最后的分号时，删除最后一个条件。话不多说看代码：

easyui的下拉框   <select id="singerName_select"   class="easyui-combobox" style="width:200px;"></select>

jquery代码：

<pre name="code" class="javascript">var select_singerIdLs="";//id
var select_singerNameLs="";//id对应的名称用于在页面显示
function initSingerByInput(){
	select_singerIdLs="";//初始清空id值
	$('#singerName_select').combobox({
		url: Globals.URL.URL_QUERYSINGERCOMBOBOX,//查询后台的url地址
		valueField:'id',//返回的json数据中的id字段
		textField:'singerName',//返回的json数据用于显示的名称字段
		width: 182,
		multiple:true,
		panelHeight:'auto',
		//事件绑定
		onChange: function (newValue, oldValue) {//combobox中值变化时，触发此事件
			//判断当前下拉框中的内容是增加还是减少，减少时删除该名字。
			if(newValue.toString().length<oldValue.toString().length){
				newValue=newValue.toString().substring(0,newValue.toString().lastIndexOf(";")+1);
		}
			var newString=newValue.toString();
			var newList=newString.split(";");//根据分号将新值分成数组
			var oldList=select_singerNameLs.toString().split(";");//根据分号将老值分成数组
	               //有逗号时获取逗号之后的值
			if(newString.lastIndexOf(",",newString.length)!=-1){
				newString=newString.substring(newString.lastIndexOf(",",newString.length)+1);
			}
			//获取当前选中的值
			if((newString.lastIndexOf(";",newString.length-2)+1)!=-1){
				newString=newString.toString().substring(newString.lastIndexOf(";",newString.length-2)+1, newString.length-1);

			}
		//输入框中的值改变时就会提交忽略id提交，id提交一次，名字提交一次，判断newString是否为名字
			if(isNaN(newString)||newString==""||newString==null){
				//遍历老值
				$.each(oldList,function(n,oldValue) {
					if(oldValue==""){
						return;
					}
					var i=0;
					var z=0;
					$.each(newList,function(m,newValue) {//遍历新值
						if(newValue==""){
							return;
						}

						if(oldValue==newValue){//当老值数组在新值数组中可以找到对应的名字i则++
							i++;
						}

					});
					//如果i依然为0，表示老数组中某个值无法在新值中找到，即combobox输入框中删除了某个名字，这时删除对应的id	
					if(i<1){
						var idList=select_singerIdLs.toString().split(";");//分割id生成数组
						idList.splice(n-z,1);//删除对应位置的id，开始id和名字在各自数组的位置是相同的
						select_singerIdLs="";
						$.each(idList,function(f,idValue){
							if(idValue==""){
								return;
							}
							select_singerIdLs +=idValue+";";//重新生成一个新的字符串
						});
						z++;//标志字符串被删过的次数，
					}

				});
				//当输入框中无值时，清空输入框的数据，
				if(isNaN(newValue.toString())){
					if(newValue.toString()==""){
						$('#singerName_select').combobox('setValue',"");
						
					}else{
						select_singerNameLs=newValue;
						$('#singerName_select').combobox('setValue',select_singerNameLs);
					}
				}
			}
			//当输入框中无值时，清空输入框的数据，结束
			if(newValue.toString()==""||!isNaN(newValue.toString())){
				$('#singerName_select').combobox('setValue',"");
				return;
			}else{
				var url = Globals.URL.URL_QUERYSINGERCOMBOBOX + "?singerName=" + encodeURI(encodeURI(newString));
				$('#singerName_select').combobox("reload",url);
				//alert(select_singerIdLs);
			}
		},
		onSelect : function(){//选中下拉表中的某个值时触发
			var id = $(this).combobox("getValues")+";"; //获取当前选中的值
			var idLs=select_singerIdLs.toString().split(";");
			select_singerNameLs = $(this).combobox("getText")+";"; //获取当前选中的文字
			//截取最后选择的歌手
			if(id.lastIndexOf(",")==-1){
				id=id.toString().substring(id.lastIndexOf(";",id.length-2)+1);
			}else{
				id=id.toString().substring(id.lastIndexOf(",")+1);
			}
			//匹配是否有相同的歌手
			if(select_singerIdLs==""||select_singerIdLs==null){
				select_singerIdLs +=id;
				if(select_singerNameLs.lastIndexOf(",",select_singerNameLs.length)!=-1){
					select_singerNameLs=select_singerNameLs.substring(0,select_singerNameLs.lastIndexOf(";",select_singerNameLs.length-2)+1)+select_singerNameLs.substring(select_singerNameLs.lastIndexOf(",",select_singerNameLs.length)+1);
				} 
			}else{
				var m=0;
				$.each(idLs,function(n,value) {
					if(value==id.substring(0,id.length-1)){
						m++;
					}
				});
				if(m<1){//无相同的名字，添加新名
					select_singerIdLs +=id;
					if(select_singerNameLs.lastIndexOf(",",select_singerNameLs.length)!=-1){
						//删除手动输入的字段
						select_singerNameLs=select_singerNameLs.substring(0,select_singerNameLs.lastIndexOf(";",select_singerNameLs.length-2)+1)+select_singerNameLs.substring(select_singerNameLs.lastIndexOf(",",select_singerNameLs.length)+1);
					} 
				}
				if(select_singerNameLs.lastIndexOf(",",select_singerNameLs.length)!=-1){
				//删除手动输入的字段以及重复名
					select_singerNameLs=select_singerNameLs.substring(0,select_singerNameLs.lastIndexOf(";",select_singerNameLs.length-2)+1);
				} 
			}
			$('#singerName_select').combobox('setValue',select_singerNameLs);
			//$('#selected_singerIdLs').val(select_singerNameLs); //隐藏框的值
			//alert(select_singerIdLs+"===="+select_singerNameLs);
		}
	});
}

第一次写博客，有点乱糟糟的，希望对你有所帮助。写这个主要是总结一下，方便自己也方便大家！