jquery自定义下拉列表示例

自从上次做了JQ自定义分页插件和表格插件后，就没在自定义过插件了，这一个月都在用linq和ef，基本前端都没怎么去碰了，今天有个同事说有个项目需要在下拉框里面带有复选框，本来想网上找下插件的，一想，其实这功能也并不难，于是就自己做了一个，也趁机再次熟悉下JQ自定义插件吧，好了，先附上效果图先

看上去没怎么难吧，其实就是强化JQ，免得太久没用，生疏了。好了。附上我的代码：复制代码代码如下：(函数($){var option={ isEdit:false，//是否可以编辑：默认是否列表高度：200,//下拉框高度列表宽度：0,//下拉框长度//数据源data:[ {'value':1，' text': '选择1'}，{'value':2，' text': '选择2'}，{'value':3，' text': '选择3'}，{'value':4，' text': '选择4'} ] } //开始创建下拉框函数Start(obj) { if(！选项。I edit){ obj。attr({ ' readonly ' : ' readonly ' })；} var Mylist=$(' div/div ')；var ul=$(' ul/ul ')；ul。CSS({“列表样式”:“无”，“边距”:“0px”，“填充”:“2px”)})；我的列表。CSS({ ' border ' : ' 1px solid # d9e 5 F3 '，' position':'absolute '，' overflow-y':'scroll '，' background-color':'#fff '，' font-size ' : ' 12px ' })；如果(选项列表高度=0) {选项.Listheight=200} myList.height(选项列表高度)；如果(选项列表宽度=0) {选项.列表宽度=obj。width()}我的列表。宽度(选项列表宽度)；//默认位置是在创建元素的下方我的名单。偏移量({ ' top ' : obj。偏移量().顶部物体。outhealth()，' left':obj.offset().左});var data=option.dataif(数据。长度0){ for(I=0；idata . lengthi){ var Li=$(' Li/')；var ListSon=$(' input type=' checkbox '/')；利森。change(function(){ if(this。选中){ obj。瓦尔。val()$(this)).val())；} else { obj.val(obj.val)().替换($(这个).val()，' '))；} }) myList.mouseover()函数(){ mylist。show()；}) myList.mouseout(函数(){ mylist。hide()；})var span=$(“span/span”)；span.text(数据[i].文本);ListSon.val(数据[i]).值";");李。追加(ListSon)；追加(跨度)；ul。追加(李)；} } MyList。追加(ul)；我的名单。appendo(' body ')；我的名单。hide()；FoucsShow($(obj)，我的列表)；} //当获取到焦点使出现该下拉框函数我的名单。focus(function(){我的列表。show()})} $。fn。创建列表=函数(新选项){ $ .extend(选项，新选项)；start($(this))；} })(jQuery)；前台调用：复制代码代码如下：美元(' #d2 ').createList({ //数据源data:[ {'value':'C# '，' text':'C#'}，{'value': ' .NET '，'文本' :NET'}，{'value':'Java '，' text':'Java'}，{'value':'JSP '，' text':'JSP'}，{ ' value ' : ' C ' }，{ ' value ' : ' C ' }，{'value':'javascript '，' text ' : ' javascript$('#d3 ').创建列表()；})