模拟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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
再论Javascript的类继承
Mar 05 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
通过微信公众平台获取公众号文章的方法示例
Dec 25 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 str_pad 函数用法简介
2009/07/11 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
python和pyqt实现360的CLable控件
2014/02/21 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python统计中文字符数量的两种方法
2019/01/31 Python
linux环境下Django的安装配置详解
2019/07/22 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
喷漆工的岗位职责
2014/03/17 职场文书
新闻人物通讯稿
2014/10/09 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
大学生自荐书范文
2015/03/05 职场文书
贷款收入证明范本
2015/06/12 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书