JQ模仿select
<!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的更多相关文章
- jq bootstrap select 点击不能动弹
jq bootstrap select 点击不能动弹 因为是样式selectpicker 冲突. 解决办法换 样式 form-control <select name="ty ...
- jq操作select集合
jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...
- jQ的select事件和trigger方法的小冲突
方法和事件都不难理解,分开用也都没问题,但是一起用就有些小问题出现. 直接上结论:使用trigger方法触发一个文本类型的 input 元素的select事件时,chrome浏览器会错误的触发三次,f ...
- div模仿select效果二:带搜索框
项目需要,要做一个首字母快速定位的select,代码如下: HTML <div class="select_country" unselectable="on&qu ...
- JQ获取select上的option的data-start和data-id
来源:https://zhidao.baidu.com/question/692142321436883524.html 静态的写法: 用jq的attr()函数,如: HTML: <select ...
- JQ仿select框
点击[cy_title]后弹出[cy_list]层,选中里面的元素把值赋给 [cy_title] 在[cy_list] 打开的时候,点击其他地方可以关闭: HTML: <div class=&q ...
- input和div模仿select,带输入提示
有时候我们需要select和input的结合体,即可以使用下拉框,同时也可以用来输入,输入的同时显示可选的下拉选项 先上html代码 <div class="input-group i ...
- jq 操作select
添加option $("#ID option").each(function(){if($(this).val()==111){$(this).remove();}}); 移除op ...
- JQ操作select项
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
随机推荐
- 万网免费主机wordpress快速建站教程-wordpress下载及安装
进入wordpress官网(http://cn.wordpress.org)下载最新的wordpress安装程序,下载完成后解压到任意电脑目录. 解压完毕后,使用FTP管理工具上传安装文件至主机htd ...
- java编写一个端口扫描器
好久没写java了,学的时候,也没学习网络编程这一块,无意中看到了一本书,于是小小复习一下java,写个端口扫描器,玩玩吧,网上这种小公具有的是,就是自己无聊写着玩玩. 源代码如下: 共两个类,比较简 ...
- 原生js的数组除重复
js对数组的操作在平常的项目中也会遇到,除去一些增加,或者减少的操作外,还有一个比较重要的操作就是数组的除重,通过数组的除重,我们可以将一个数组中存在的多个重复的数组进行清理,只留下不重复的.另外下面 ...
- bzoj1068:[SCOI2007]压缩
思路:区间dp,设状态f[l][r][bo]表示区间[l,r]的答案,bo=1表示该区间可以放M也可以不放M,bo=0表示该区间不能放M,并且对于任意一个状态f,l和l-1之间均有一个M,于是就可以进 ...
- ASP.NET中Json的处理
要使用.NET自带的JSON处理工具需要引用下面的命名空间: using System.Web.Script.Serialization; 1.编码 myConfig mc = new myConfi ...
- MongoDB笔记(五)深入学习
系列一:http://www.cnblogs.com/huangxincheng/category/355399.html系列二:http://www.cnblogs.com/lipan/catego ...
- python 访问php程序,实现定时
#!/usr/bin/python #test2.py import sys import urllib2 j = True jj = 1##########用于统计,所以分页, url = 'htt ...
- Check Mysql Database Size
SELECT ROUND( SUM(data_length + index_length) / 1024 / 1024 ) TOTAL_MB, ROUND(SUM(data_length) / 102 ...
- 关于C# Winform 程序开机自动启动
1.程序运行时调用下面方法即可. /// <summary> /// 设置开机自动启用 /// </summary> private void SetAutoStart() { ...
- php 商务网站购物车联动地址
数据表如下: CREATE TABLE IF NOT EXISTS `china` (`region_id` smallint(5) unsigned NOT NULL, `parent_id` s ...