<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script src="http://upcdn.b0.upaiyun.com/libs/modernizr/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="Jselect.js" type="text/javascript"></script>
<style>
*, html {
margin: 0;
padding: 0;
}
#body {
width: 460px;
margin: 0 auto;
height: 300px;
padding: 5%;
}
ul, li {
list-style: none;
}
#select {
height: auto;
width: 134px;
text-align: center;
border: #a1bcd1 1px solid;
}
#select .first {
background: url(http://cqcmxy.com:81/Content/Image/icobg_1.4.png) -77px -112px;
margin-bottom: 2px;
display:block;
}
#select li {
width: 134px;
height: 20px;
line-height: 25px;
cursor: pointer;
}
#select ul li {
display: none;
width: 134px;
}
</style>
</head> <body>
<div id="body">
<div id="select"> <span class="first">1</span>
<input type="hidden" value=""/>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#select").Jselect();
</script>
</body>
</html>

  

$.fn.extend({
Jselect:function(){
var me=$(this);
var li=me.find("li");
var span=me.find("span");
var hidden=me.find("input[type=hidden]");
me.hover(function(){li.show(); span.css({backgroundPosition:"-77px -143px"})},function(){li.hide(); span.css({backgroundPosition:"-77px -113px"})})
li.hover(function(){
$(this).css({background:"blue",color:"#fff"});
},function(){
$(this).css({backgroundColor:"",color:""});
})
li.click(function(){
me.find("span").html($(this).text());
hidden.val($(this).text());
})
}
})

  

JQ模仿select的更多相关文章

  1. jq bootstrap select 点击不能动弹

    jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="ty ...

  2. jq操作select集合

    jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...

  3. jQ的select事件和trigger方法的小冲突

    方法和事件都不难理解,分开用也都没问题,但是一起用就有些小问题出现. 直接上结论:使用trigger方法触发一个文本类型的 input 元素的select事件时,chrome浏览器会错误的触发三次,f ...

  4. div模仿select效果二:带搜索框

    项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...

  5. JQ获取select上的option的data-start和data-id

    来源:https://zhidao.baidu.com/question/692142321436883524.html 静态的写法: 用jq的attr()函数,如: HTML: <select ...

  6. JQ仿select框

    点击[cy_title]后弹出[cy_list]层,选中里面的元素把值赋给 [cy_title] 在[cy_list] 打开的时候,点击其他地方可以关闭: HTML: <div class=&q ...

  7. input和div模仿select,带输入提示

    有时候我们需要select和input的结合体,即可以使用下拉框,同时也可以用来输入,输入的同时显示可选的下拉选项 先上html代码 <div class="input-group i ...

  8. jq 操作select

    添加option $("#ID option").each(function(){if($(this).val()==111){$(this).remove();}}); 移除op ...

  9. JQ操作select项

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

随机推荐

  1. Netbeans7.0完美中文+Consolas字体显示配置(亲测可用)

    最近把开发环境从Eclipse迁移到了Netbeans上面.因为Netbeans已经相当优秀,速度快功能也不必Eclipse差,但是一只有 一个问题一直让我对eclipse非常纠结:如果把字体选择为C ...

  2. C++学习(五)

    一.拷贝构造函数和拷贝赋值运算符1.拷贝构造:用一个已有的对象,构造和它同类型的副本对象——克隆.2.形如class X {  X (const X& that) { ... }};的构造函数 ...

  3. initMethod 和 afterPropertiesSet 以及 AwareMethod方法的执行时机

    在spring开发中,我们定义bean 经常会需要用到beanFactory对象,这就需要实现BeanFactoryAware这种类型的接口,它有一个setBeanFactory方法   在xml中配 ...

  4. 20160410javaweb之JDBC---DBUtils框架

    DBUtils 1.DbUtils 工具类 2.QueryRunner -- 两行代码搞定增删改查 (1)QueryRunner() --需要控制事务时,使用这组方法 int update(Conne ...

  5. 学习笔记5_Day09_网站访问量统计小练习

    练习:访问量统计 一个项目中所有的资源被访问都要对访问量进行累加! 创建一个int类型的变量,用来保存访问量,然后把它保存到ServletContext的域中,这样可以保存所有的Servlet都可以访 ...

  6. javax.servlet.ServletException: Servlet execution threw an exception 异常解决之一

    配置JDBC连接的JDBC.properties文件不存在(那天很奇怪配置文件不存在了,我也没有去移动那个文件.诡异呀)也会导致这个异常. 然后就报javax.servlet.ServletExcep ...

  7. iOS 开发中的单例

    在iOS开发中经常会用到单例,比如每个iOS程序本身就是一个单例,在比如进行个人偏好设置存储的时候用的也是一个单例.那我们如何自己来写一个单例类呢,用自己的单例对象呢?下面是我写的一个单例的头文件里的 ...

  8. ios专题 - 图片(UIImage)获取方法

    说到图片获取的方法,就得看API文档. UIImage生成实例的方法有: 1)imageNamed 从指定文件返回对象. 这个方法有个比较特殊的地方:该方法首先从系统缓存中寻找该图片,如果有,则从缓存 ...

  9. ASP.NET中Json的处理

    要使用.NET自带的JSON处理工具需要引用下面的命名空间: using System.Web.Script.Serialization; 1.编码 myConfig mc = new myConfi ...

  10. 【ADO.NET】5、手机归属地查询( winfrom )

    using System.IO; 有一个数据库手机号码的txt文件,格式是 : 13500000000-13560000000-中国移动 查询结果: 湖南移动[邵阳]文件夹选择对话框 FolderBr ...