jQuery实现的仿select功能代码
本文实例讲述了jQuery实现的仿select功能。分享给大家供大家参考。具体如下：
这里重新再次与大家分享jQuery仿select功能，这个实现起来倒不复杂，就当研究一下jQuey插件的用法啦，还望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-fselect-cha-method-codes/
具体代码如下：
<!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程序设计有所帮助。
相关推荐
-
jQuery实现非常实用漂亮的select下拉菜单选择效果
本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果.分享给大家供大家参考,具体如下: 先来看如下运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
-
jquery实现动态操作select选中
今天因为有项目需要动态操作select选中 习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个 发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下 复制代码 代码如下: //初始化select,第一个选中 $('#stoStoreCategoryID').get(0).selectedIndex=0; $("#stoStoreCategoryID option").each(function(i,n){
-
Jquery对select的增、删、改、查操作
逃不开传统的四种操作:增.删.改.查. <四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看.日历天数变化代码为原创.> [增]: 复制代码 代码如下: $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) $("#select_id").prepend("&l
-
基于jquery实现select选择框内容左右移动添加删除代码分享
本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图: ----------------------查看效果----------------------- 小提示:浏览
-
jquery使用ul模拟select实现表单美化的方法
本文实例讲述了jquery使用ul模拟select实现表单美化的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ul模拟select,是jQuery插件实现的Select下拉菜单效果,类似的功能网上已经有一些了,每一款都代表了不同的编程思路,为学习提供一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ul-select-table-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap"> <div class="nice-select" name="nice-select&
-
jquery操作select方法汇总
本文实例汇总了jquery操作select的方法.分享给大家供大家参考.具体如下: jQuery获取Select选择的Text和Value: 语法解释: 复制代码 代码如下: $("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text();
-
jquery实现select下拉框美化特效代码分享
这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码. 为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&
-
jQuery结合CSS制作漂亮的select下拉菜单
我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li
-
jquery 实现两Select 标签项互调示例代码
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" c