jQuery实现的仿select功能代码


Posted in Javascript onAugust 19, 2015

本文实例讲述了jQuery实现的仿select功能。分享给大家供大家参考。具体如下:

这里重新再次与大家分享jQuery仿select功能,这个实现起来倒不复杂,就当研究一下jQuey插件的用法啦,还望大家喜欢。

运行效果截图如下:

jQuery实现的仿select功能代码

在线演示地址如下:

具体代码如下:

<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset=utf-8>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery.select.js" type="text/javascript"></script>
<title>jQuery select</title>
</head>
<style>
.select-my ul,.select-my li{
 margin:0;padding:0;
}
.select-my{
 position:absolute;
 min-width:100px;
 *width:100px;
 left:100px;
 top:20px;
 border:1px solid #aaa;
 border-bottom:none;
} 
.select-my b{
 float:left;
} 
.select-my span{
 float:right;
}
.select-my li{
 width:100%;
 min-height:20px;
 *height:20px;
 border-bottom:1px solid #aaa;
 line-height:20px;
 vertical-align:middle;
}
.select-my img{
 line-height:20px;
 vertical-align:middle; 
}
.select-my .select-my-list{
 border-bottom:none;
}
.select-my .select-my-list{
 display:none;clear:both;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $('#select-1').makeSelect({
  className:'my',
   dataValue:[1,2,3],
   dataHtml:['1','二','3'],
   callback:function(){
   $('#msg').val( $('#select-1').val() );//显示选中的值
   }
 });
 $('#select2').makeSelect({
  description:'请',
  logo:['?','△'],
  className:'',
   dataValue:[1,2,3],
   dataHtml:['<img src=images/a1.jpg width=20 height=20 />1','<img src=images/a2.jpg width=20 height=20 />二','<img src=images/a3.jpg width=20 height=20 />33ssssssssssaaa'],
   callback:function(){
   $('#msg').val( $('#select2').val() );//显示选中的值
   }
 });
});
</script>
<body>
<div class="select" id="select-1"></div>
<div id="select2" style="position:absolute;top:200px;left:200px;">select2</div> 
<div style="position:absolute;left:300px;top:330px;">被选中的值是<input type="text" id="msg"/></div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
详解node.js 事件循环
Jul 22 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 #Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 #Javascript
js实现文本框支持加减运算的方法
Aug 19 #Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
You might like
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
javascript学习之闭包分析
2010/12/02 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python常见的格式化输出小结
2016/12/15 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python求绝对值的三种方法小结
2019/12/04 Python
python TCP包注入方式
2020/05/05 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
一道Delphi面试题
2016/10/28 面试题
王老吉广告词
2014/03/20 职场文书
运动会横幅标语
2014/06/17 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
开天辟地观后感
2015/06/09 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
浅谈Python项目的服务器部署
2021/04/25 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Moment的feature导致线上bug解决分析
2022/09/23 Javascript