<!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. c指针与数组，传参问题，指针数组与数组指针的区别，二维数组动态内存分配

    一 数组的结构:顺序存储,看谭浩强中的图,牢记 1.数组名指代一种数据结构:数组 现在可以解释为什么第1个程序第6行的输出为10的问题,根据结论1,数组名str的内涵为一种数据结构,即一个长度为10的 ...

  2. 一个现代化的JSON库Moshi针对Android和Java

    Moshi 是一个现代化的JSON库针对Android和Java.它可以很容易地解析JSON成Java对象: String json = ...; Moshi moshi = new Moshi.Bu ...

  3. Android开发——构建自定义组件

    Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button). 文本框(TextView), 可编辑文本框(EditText), 列表框(ListView), 复选框 ...

  4. ios objection

    给大家介绍个不错的团队开发模块化工具objection 1. setup<这里我只介绍ios相关> rake artifact:ios cp -R build/Release-iphone ...

  5. ios UIWebview本地加载H5网页

    注意两点 1.拖动文件到工程中选择create folder,文件夹为蓝色  --不要让文件参与编译,而只是让文件加入进来 2.加载方式pathforresorth   oftype   indire ...

  6. Less 官方文档学习笔记

    LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...

  7. JS 浮点型数字运算（转）

    示例: var num1=3.3; var num2=7.17; var ret=parseFloat(num1)+parseFloat(num2); //ret的值为:10.469999999999 ...

  8. javascript 事件多次绑定和删除

    同一个事件绑定多个事件处理程序(适合自己写)IE: 添加: 对象.attachEvent("on事件名","处理程序/函数名"); 执行顺序从后向前 删除: 对 ...

  9. 使用远程链接数据库工具无法链接到 linxu 系统上的数据库配置 1045

    1.远程连接上Linux系统,确保Linux系统已经安装上了MySQL数据库.登陆数据库.mysql -uroot -p(密码). 2. 创建用户用来远程连接 GRANT ALL PRIVILEGES ...

  10. virtualenv创建虚拟环境

    在开发Python应用程序的时候,系统安装的Python3只有一个版本:3.4.所有第三方的包都会被pip安装到Python3的site-packages目录下. 如果我们要同时开发多个应用程序,那这 ...