<!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. nyoj 2 括号配对问题

    括号配对问题 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述 现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0& ...

  2. 【转】【2015MIIC】迅雷CTO陈磊：互联网思维会害死很多传统企业

    MIIC2015大会的“跨界与重构”论坛上,迅雷CTO.网心科技CEO陈磊的演讲引起众多共鸣——独家揭秘“互联网大忽悠”,给这群人画了像,互联网大忽悠通常有五招: 第1招,画大饼,给你一个宏伟的目标: ...

  3. JQuery设置缓慢下拉大行多次执行的解决办法，以及stop()函数的简单理解

    $(function(){ $('.all>li').mouseover(function(e) {        $(this).children().stop().slideDown(300 ...

  4. MVC知识总结（前序）

    距离2015年的来临还有1天的时间,是时候总结一下今年的经过脑子的知识了,由于今年里工作中接触MVC的时间特别多,所以打算针对MVC这个东西的知识进行一个总结,好歹对得起在几个项目中用了MVC来进行开 ...

  5. 数据库连接池php-cp介绍

    php-cp(php-connect-pool)是用php扩展写的一个数据库连接池. 我们知道php开发速度快,适合创业快速迭代,但当流量大了之后,php大量的短连接给db层造成多余的消耗,而php处 ...

  6. Sublime Text2配置python环境

    1.下载python并安装     地址:https://www.python.org/downloads/ 2.下载Sublime Text2 并安装     地址:http://www.subli ...

  7. Oracle hextoraw和rawtohex

    Oracle hextoraw和rawtohex [日期:2012-07-17] 来源:Linux社区  作者:adrain_001 [字体:大 中 小]     HEXTORAW  语法: HEXT ...

  8. struts2类型转换中的错误处理

    由于类型转换过程中有可能出现原始参数无法转换为目标类型的错误,所以struts2提供了类型转换中的异常处理机制. 在struts2的默认配置文件struts-default.xml中有如下一段配置代码 ...

  9. 16_MyBatis中期小结

    [MyBatis是什么] MyBatis是一个持久层框架,Mybatis是一个不完全的ORM框架,SQL语句需要程序员自己去编写,但是MyBatis也有映射(输入参数映射.输出结果映射). MyBat ...

  10. Github进行项目管理的常用命令总结

    最近项目中使用github来管理代码,将git的常用命令整理了一下,方便以后查询 查看git的本地配置git config --list 克隆到本地git clone (网页上面的那个http地址 g ...