jquery自定义下拉列表示例_表单特效

来源：懂视网责编：小采时间：2020-11-27 21:22:07

jquery自定义下拉列表示例_表单特效

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

推荐度：

点击下载本文 文档为doc格式

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

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

看上去没怎么难吧，其实就是强化JQ，免得太久没用，生疏了。好了。附上我的代码：

代码如下:
(function($){

if(data.length>0)
{
for(i=0;i {
var li=$("

");
var ListSon=$("");
ListSon.change(function(){
if(this.checked)
{
obj.val(obj.val()+$(this).val());
}
else
{
obj.val(obj.val().replace($(this).val(),""));
}
})
myList.mouseover(function(){
myList.show();
})
myList.mouseout(function(){
myList.hide();
})
var span=$("");
span.text(data[i].text);
ListSon.val(data[i].value+";");
li.append(ListSon);
li.append(span);
ul.append(li);
}
}
myList.append(ul);
myList.appendTo("body");
myList.hide();

FoucsShow($(obj),myList);
}
// 当获取到焦点使出现该下拉框
function FoucsShow(obj,myList)
{
obj.focus(function(){myList.show()})
}
$.fn.createList=function(newoption)
{
$.extend(option,newoption);
Start($(this));

}
})(jQuery);

前台调用：

代码如下:
$("#d2").createList({
//数据源
data:[
{"value":"C#","text":"C#"},
{"value":".NET","text":".NET"},
{"value":"Java","text":"Java"},
{"value":"JSP","text":"JSP"},
{"value":"C","text":"C"},
{"value":"C++","text":"C++"},
{"value":"javascript","text":"javascript"},
{"value":"ajax","text":"ajax"},
{"value":"json","text":"json"},
{"value":"xml","text":"xml"},
{"value":"sql server","text":"sql server"},
{"value":"xml","text":"Mysql"},
{"value":"oracle","text":"oracle"},
{"value":"JQuery","text":"JQuery"},
{"value":"Ext js","text":"Ext js"},
{"value":"CSS3","text":"CSS3"},
{"value":"HTML5","text":"HTML5"}
]
});
$("#d3").createList();
})

jquery自定义下拉列表示例_表单特效

推荐度：

点击下载本文 文档为doc格式

标签：下拉菜单特效列表

热门焦点

jquery自定义下拉列表示例_表单特效

jquery自定义下拉列表示例_表单特效

jquery自定义下拉列表示例_表单特效

最新推荐

猜你喜欢

热门推荐