<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>利用jquery模拟select效果</title>
<style>
.pr-select,
.please-choose,
.select-ul li {
　　width: 100%
}

.pr-select {
　　position: relative;
}

.please-choose {
　　border-radius: 5px;
　　border: 1px solid #C4C4C4;
　　height: 28px;
　　line-height: 28px;
}

.div_select {
　　position: relative;
}

.jack-tipping-cam {
　　position: absolute;
　　top: 10px;
　　right: 10px;
　　font-style: normal;
　　width: 0;
　　height: 0;
　　border: 5px solid transparent;
　　border-top-color: #000;
}

.select-ul {
　　list-style: none;
　　display: none;
　　width: 100%;
　　position: absolute;
　　left: 0;
　　top: 0;
　　margin: 0;
　　padding: 0;
}

.select-ul li {
　　line-height: 28px;
　　width: 100%;
}

.select-blue {
　　background: #09F;
}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
　　$(document).ready(function () {
　　　　$("#ul-select li").mouseover(function () {
　　　　$("#ul-select li").removeClass("select-blue");
　　　　$(this).addClass("select-blue");
　　})
　　$(".div_select").click(function () {
　　　　$("#ul-select").show();
　　})
　　$("#ul-select li").click(function () {
　　　　$("#ul-select").hide();
　　　　$("#please-choose").val(($(this).text()));
　　})
})
</script>
</head>
<body>
<form>
　　<div class="pr-select">
　　　　<div class="div_select">
　　　　　　<input type="text" class="please-choose" id="please-choose" placeholder="请选择">
　　　　　　<i class="jack-tipping-cam"></i>
　　　　</div>
　　　　<ul class="select-ul" id="ul-select">
　　　　　　<li class="select-blue">河南省</li>
　　　　　　<li>北京市</li>
　　　　　　<li>安徽省</li>
　　　　　　<li>重庆市</li>
　　　　　　<li>四川省</li>
　　　　　　<li>河北省</li>
　　　　　　<li>天津市</li>
　　　　</ul>
　　</div>
</form>
</body>
</html>

利用jquery模拟select效果的更多相关文章

  1. WPF中利用RadialGradient模拟放大镜效果

    原文:WPF中利用RadialGradient模拟放大镜效果 --------------------------------------------------------------------- ...

  2. Jquery学习笔记：利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

  3. jquery模拟checkbox效果，以及background-size在jquery中的使用。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. jquery模拟下拉框

    <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框< ...

  5. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  6. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  7. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  8. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  9. 利用jQuery实现回收站删除效果

    jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富.今天我们用一个示例来解说jQuery是如何实现拖拽的. ...

随机推荐

  1. [Luogu2135] 方块消除【区间Dp】

    Online Judge:P2135 方块消除(这题不用预处理) Label:区间Dp 题目描述 Jimmy最近迷上了一款叫做方块消除的游戏.游戏规则如下:n个带颜色方格排成一列,相同颜色的方块连成一 ...

  2. Lua程序设计之字符串精要

    (摘自Lua程序设计) 基本: Lua语言的字符串是一串字节组成的序列. 在Lua语言中,字符使用8个比特位来存储. Lua语言中的字符串可以存储包括空字符在内的所有数值代码,这意味着我们可以在字符串 ...

  3. 44道JS难题

    国外某网站给出了44道JS难题,试着做了下,只做对了17道.这些题涉及面非常广,涵盖JS原型.函数细节.强制转换.闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点. 你 ...

  4. css3 ---2 属性的选择器

    存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...

  5. 自定义StringBuilder类拼接非空字符串

    主要目的: 为了拼接多个非空字符串,还能达到链式的装X效果这里不考虑线程安全,所以使用StringBuilder快速拼接非空内容,中间用","作为分隔. 代码如下: package ...

  6. thinkphp 模板主题

    一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: 大理石平台精度等级 // 设置默认的模板主 ...

  7. thinkphp 自动完成

    自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理. 因此,在ThinkPHP使用create方法来创建数据对象是更加安全的方式, ...

  8. 安装Tengine和Tengine说明

    什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/   Tengine的安装   新建tengine用户组 groupadd -r n ...

  9. CF #578 Div2

    // 比赛链接:https://codeforces.com/contest/1200 A - Hotelier 题意: 有一家旅馆有10间房,编号0~9,从左到右顺序排列.旅馆有左右两扇门,每次新来 ...

  10. Python2.7版本：定义类时为什么要继承object类？

    ********此答案摘自知乎,且经过自己实际运行后得出******** 继承 object 类的是新式类,不继承 object 类的是经典类 例子: 新式类: 经典类: B.C 是 A 的子类,D ...