Jquery多選資料字典外掛

',
{'class':(options.disabled?options.disabledclass:options.selectclass),
'width':options.width,
'click':function(evt){
$('.ddlclass').hide();
if(options.disabled)return;
var $thispos = $(this).offset();
var $thisheight = $(this).outerHeight();
var $lb = $('div.'+options.listboxclass,$this);
var $lbheight = $lb.outerHeight();
var $lbwidth = $lb.outerWidth();
var lbtop = (($thispos.top + $thisheight + $lbheight)>$(document).height() && $thispos.top>$lbheight)?
$thispos.top-$lbheight:$thispos.top + $thisheight;
var posright = $thispos.left+$(this).outerWidth()-$lbwidth;
var posleft = $thispos.left;
var lbleft = $lbwidth+$thispos.left>$(document).width()?posright:posleft;
switch(options.listboxalign){
case 'left':
lbleft = posleft;
break;
case 'right':
lbleft = posright;
break
default:
break;
}
if(hide){
$("#"+$this.attr("id")+"_select").show();
hide = false;
}else{
$("#"+$this.attr("id")+"_select").hide();
hide = true;
}
//$('div.'+options.listboxclass,$this).css({'top':lbtop,'left':lbleft}).show();
stopBubble(evt);
}
}).appendTo($this);

//繫結onchange事件
if(options.onchange){
//onchange=""+options.onchange(this.text,this.value)+""
//隱藏的input，用來存字典的key串，這個是向後臺提交的東西
selectInput = $("").appendTo($this);
//selectInput.onchange = function(){alert(10)};
}else{
//隱藏的input，用來存字典的key串，這個是向後臺提交的東西
selectInput = $("").appendTo($this);
}

//獲取select的寬度
options.listboxwidth = options.listboxwidth<=0?select.outerWidth():options.listboxwidth;

var listBoxDiv = $("");
listBoxDiv.attr("id",$this.attr("id")+"_select");
listBoxDiv.attr("style","position:absolute;width:"+options.listboxwidth+"px;overflow:hidden;overflow-y:auto;display:none;z-index:1000;");
var listBoxTable = $("");
var listBoxTbody = $("");
var selectKey = "";
var selectValue = "";
//預設哪些選中的
for(var i=0;i if(i==0){
selectKey = options.selected[i];
}else{
selectKey = selectKey + "," + options.selected[i];
}
}
selectInput.attr("value",selectKey);
$.each(mdata,function(k,v){
//預設哪些選中的
for(var i=0;i if(k==options.selected[i]){
selectValue = selectValue + "," + v;
}
}
var listTr = $("");

if(options.checkbox){
var selected = options.selected;
var listTd0 = $("");
listTd0.attr("width","22");
var checkedFlag = true;
//預設選中的
for(var i=0;i if(k==selected[i]){
listTd0.append($(""));
checkedFlag = false;
break;
}else{
continue;
}
}
if(checkedFlag){
listTd0.append($(""));
}
listTr.append(listTd0);
}
var listTd1 = $("");
listTd1.click(function(){
var ckb=$(this).prev().find(":checkbox");
var ckbval=$(this).prev().find(":checkbox").attr("checked");
ckb.attr("checked",!ckbval);
})
listTd1.append(v);
listTr.append(listTd1);
listBoxTbody.append(listTr);
});
//回顯顯示值
if(selectValue!=""){
selectValue = selectValue.substring(1,selectValue.length);
select.empty();
select.append(selectValue);
select.attr("title",selectValue);
selectInput.attr("text",selectValue);
}else{
select.empty();
select.append(" select.attr("title","");
selectInput.attr("text","");
}
listBoxTable.append(listBoxTbody);
if(options.checkbox){
var tfoot = $('');
listBoxTable.append(tfoot);
var _btn = $('input',tfoot);
//確定按鈕的點選事件
$(_btn[0]).click(function(){
var selectedKey = "";
var selectedValue = "";
$("input[name='"+selectDivId+"_checkbox']:checked").each(function(i){
if(i==0){
selectedKey = $(this).val();
selectedValue = $(this).attr("valuestr");
}else{
selectedKey = selectedKey + "," +$(this).val();
selectedValue = selectedValue + "," +$(this).attr("valuestr");
}
});
//設定select--前臺顯示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//設定input--往後臺
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
$("#"+$this.attr("id")+"_select").hide();
hide = true;
});
//取消按鈕的點選事件
$(_btn[1]).click(function(){
$("#"+$this.attr("id")+"_select").hide();
hide = true;
});
}

listBoxDiv.append(listBoxTable);
$this.append(listBoxDiv);
};

/*$(document).mousedown(function(event){
var obj=$(this);
alert(event.srcElement);
//alert(event.target.id);
});*/
/*$(document).click(function(){
if(!hide){
$("#"+$this.attr("id")+"_select").hide();
hide = true;
}
});*/
//$(window).resize(function(){$("#"+$this.attr("id")+"_select").hide();});

var getValues = function(){

}
var setValues = function(values){
$("input[name='"+selectDivId+"_checkbox']").each(function(i){
$(this).attr("checked",false);
for(var j=0;j if($(this).val()==values[j]){
$(this).attr("checked",true);
}
}
});
var selectedKey = "";
var selectedValue = "";
//設定select--前臺顯示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//設定input--往後臺
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
$("input[name='"+selectDivId+"_checkbox']:checked").each(function(i){
if(i==0){
selectedKey = $(this).val();
selectedValue = $(this).attr("valuestr");
}else{
selectedKey = selectedKey + "," +$(this).val();
selectedValue = selectedValue + "," +$(this).attr("valuestr");
}
});
//設定select--前臺顯示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//設定input--往後臺
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
}
//返回的物件
var returnObj = {
getValues : getValues,
setValues : setValues
};
return returnObj;
};

})(jQuery);

用法：

var selectObj;
$(document).ready(function(){
selectObj = $('#multiSelect1').dropdownlist({

checkbox:true,//是否複選
width:400,
code:"PROD_PEACCU",
selected:"${dictTest}",
name : "role.dict"
});
function setValues(){
selectObj.setValues("1,2,3");
}