1. 云栖社区>
  2. >
  3. 正文

模拟select的代码_jquery

作者:用户 来源:互联网 时间:2016-10-19 19:34:42

模拟select

模拟select的代码_jquery - 摘要: 本文讲的是模拟select的代码_jquery, 几年前不知道在哪下载的源码上改的,去年开始学jquery,就改了一下,代码有点乱。只是自己用,没有考虑写成通用的组件,所以童鞋们如果真的要拿去用的话有点麻烦几个状态,展开收起是jquery的slide这个模拟select,只是很简单的实现

几年前不知道在哪下载的源码上改的,去年开始学jquery,就改了一下,代码有点乱。
只是自己用,没有考虑写成通用的组件,所以童鞋们如果真的要拿去用的话有点麻烦

几个状态,展开收起是jquery的slide
20111019193310637.gif
这个模拟select,只是很简单的实现了单独一个select的部分功能
没有实现比如optgroup,文字长度自适应(图片会因此修改麻烦)
再说如果页面多个select,css处理也麻烦,
数据、联动都要增加大量代码

小有小的好处,所以就不考虑进行封装,
这里有不少童鞋做的比我好很多,功能很强大

再所以,就偷一下懒,在这里送上js注释给初学者
复制代码 代码如下:

$(document).ready(function(){
var newSelect = $("#aa");
newSelect.click(function(e){
//如果没有class,即关闭状态,就展开
//打开状态就不需要处理,冒泡执行document.click
if(this.className == ""){
this.className = "open";
$(this.nextSibling).slideDown("fast");
e.stopPropagation();//阻止冒泡
}
});

//关闭收起
function closeSelect(obj){
$(obj.nextSibling).slideUp("fast",function(){
obj.className = "";
});
}
$(document).bind("click", function() {
closeSelect(newSelect[0]);
});
newSelect.next().click(function(e){
var src = e.target;

//如果有选中任何一项,取选中文字执行替换操作并改变样式,相当于select.onchange
//冒泡执行document.click关闭收起
if(src.tagName == "A"){
var PObj = src.parentNode;
PObj.previousSibling.innerHTML = src.innerHTML;
$(src).siblings().removeClass();
src.className = "current";
PObj.nextSibling.value = src.getAttribute("value");
}
});
});

演示地址:http://demo.jb51.net/js/2011/jquery_select/
打包下载:http://www.jb51.net/jiaoben/39490.html

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索模拟select jquery 模拟select、jquery模拟select插件、jquery模拟select点击、jquery div模拟select、jquery select 选中值,以便于您获取更多的相关知识。

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

开发者常用软件,超百款实用软件一站式提供