模拟select的代码
更新时间：2011年10月19日 19:34:57 作者：
模拟select的代码，使用jquery的朋友可以参考下。
几年前不知道在哪下载的源码上改的，去年开始学jquery，就改了一下，代码有点乱。
只是自己用，没有考虑写成通用的组件，所以童鞋们如果真的要拿去用的话有点麻烦
几个状态，展开收起是jquery的slide
这个模拟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/
打包下载：https://www.jb51.net/jiaoben/39490.html
只是自己用，没有考虑写成通用的组件，所以童鞋们如果真的要拿去用的话有点麻烦
几个状态，展开收起是jquery的slide
这个模拟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/
打包下载：https://www.jb51.net/jiaoben/39490.html
相关文章
今天项目中遇到过一个这样的问题，就是希望读出来的文章列表能够每隔五个加一个分割条，而不是每个都加。2010-07-07
今天小编就为大家分享一篇关于Jquery实现无缝向上循环滚动列表的特效，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-02-02
本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了利用jquery.qrcode在页面上生成二维码且支持中文。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最近在做日志统计程序，发现对方的程序是在Jquery基础上进行开发的，而公司的网站的框架是prototype。而且我也早就想了解一下Jquery源码，故决定研究Jquery源码，模拟它的方法2012-12-12
这篇文章主要介绍了JQuery省市联动效果实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery解析Json的方法,结合实例形式较为详细的分析了jQuery针对json的常用解析与转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
2012-05-05
这篇文章主要介绍了jQuery实现的网格线绘制方法,涉及jQuery针对页面元素的获取及样式动态操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery解析XML文件同时动态增加js文件的方法,涉及jQuery Ajax调用及返回函数中增加js文件的相关使用技巧,需要的朋友可以参考下2015-06-06
最新评论