模拟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代码
Apr 23 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
Jquery获取radio选中的值
May 05 jQuery
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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中Collection 类的设计
2013/06/21 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python获取apk文件URL地址实例
2013/11/01 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python日志logging模块使用方法分析
2019/05/23 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python如何计算语句执行时间
2019/11/22 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
厂长助理岗位职责
2013/12/27 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
学校介绍信范文
2014/01/14 职场文书
投标承诺函格式
2015/01/21 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang