combobox extend Additional function.add check icon,add etc button

[honhoya]

Hi. I recently solved a single problem. but i would like to know. I'd like to hear your thoughts. the best way to do this to make sure.

I had success in the implementation.

Code:

<style type="text/css">
/* combobox */
.combobox-check-image {
  background:#CCE6FF url('/static/img/check.png') no-repeat center right;
}
</style>
<script type="text/javascript">
function comboChkImg(comboId){
	var arr = $("#"+comboId).combobox('getValues');
	var tmpArr = new Array();
	if(arr[0]=="" && arr.length != 1){
		for (var index = 1; index < arr.length; index++) {
			tmpArr.push(arr[index]);
		}
	}else{
		tmpArr=arr;
	}

	if(arr.length==0){
		tmpArr.push("");
	}
	$("#"+comboId).combobox('setValues',tmpArr);
	$("#"+comboId).combobox('viewChk');
}

function comboboxClose(comboId)
{
	$("#"+comboId).combobox('hidePanel');
}

function comboboxClear(comboId)
{
	var tmpArr = new Array();
	tmpArr.push("");
	$("#"+comboId).combobox('setValues',tmpArr);
	$("#"+comboId).combobox('clearChk');
}

$.extend($.fn.combobox.methods, {
	viewChk: function(jq){
		return jq.each(function(){
			var panel = $(this).combo('panel');
			panel.find('div.combobox-check-image').removeClass('combobox-check-image');
			panel.find('div.combobox-item-selected').addClass('combobox-check-image');
		});
	}
	,closeBtn : function(jq,comboId){
		return jq.each(function(){
			var panel = $(this).combo('panel');
			console.log(comboId);
			console.log(panel);
			panel.prepend($(
					"<div>&nbsp;" +
						"<a href='#' onclick=comboboxClose('"+comboId+"') style='text-decoration:underline; font-size:11px; color:#3B80EE;'>close</a>"+
						"&nbsp;&nbsp;"+
						"<a href='#' onclick=comboboxClear('"+comboId+"') style='text-decoration:underline; font-size:11px; color:#3B80EE;'>clear all</a>" +
					"</div>"
			));
		});
	}
	,clearChk: function(jq){
		return jq.each(function(){
			var panel = $(this).combo('panel');
			panel.find('div.combobox-check-image').removeClass('combobox-check-image');
		});
	}
});
</script>

<select name="key" id="key" class="easyui-combobox" 
	data-options="editable:false, panelHeight:180, width:73, panelWidth:90, multiple:true,
		onSelect: function(){comboChkImg('key')},onUnselect: function(){comboChkImg('key')},onLoadSuccess:function(){$('#key').combobox('closeBtn','key')}">
	<option value="">[choice]</option>
	<option value="empName">Name</option>
	<option value="loginId">Id</option>
	<option value="cellTelNo">TelNo</option>
	<option value="email">email</option>
	</select>

I have made. In the data-options by calling comboChkImg () had to be inserted into the background image,
and create additional sub button on onLoadSuccess.
but i want to send a parameter in data-options you want to call the extend viewChk and closeBtn.

For example, data-options = "viewChk: true, closeBtn: true".
would like to know whether this is.
i want to hear from you in the comments. Thank you.

[stworthy]

The simple way to attach additional functionalities is to add extra icons aside of the drop-down arrow. Please refer to http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox&theme=default&dir=ltr&pitem=Extra%20Icons

[honhoya]

Thank you for answers. Um... but a little bit the same as any other.
I made it like this.

I feel. associate links and seems a little different to teach.
thank you reply.