模拟select的代码


Posted in Javascript onOctober 19, 2011

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

几个状态,展开收起是jquery的slide
模拟select的代码
这个模拟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.3water.com/js/2011/jquery_select/
打包下载:https://3water.com/jiaoben/39490.html
Javascript 相关文章推荐
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 #Javascript
Notify - 基于jquery的消息通知插件
Oct 18 #Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 #Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 #Javascript
Js sort排序使用方法
Oct 17 #Javascript
jquery中ajax学习笔记4
Oct 16 #Javascript
jquery中ajax学习笔记3
Oct 16 #Javascript
You might like
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP常用的三种设计模式
2017/02/17 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
js DOM模型操作
2009/12/28 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
django的登录注册系统的示例代码
2018/05/14 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
代码详解django中数据库设置
2019/01/28 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
服务中心夜班服务员岗位职责
2013/11/27 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
垃圾桶标语
2014/06/24 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL