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 相关文章推荐
取得元素的左和上偏移量的方法
Sep 17 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Validform表单验证总结篇
Oct 31 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
如何利用React实现图片识别App
Feb 18 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
js实现计算器功能
2020/08/10 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python调用API实现智能回复机器人
2018/04/10 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
2014国培学习感言
2014/03/05 职场文书
从事会计工作年限证明
2015/06/23 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫