<!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. Shutdown- Linux必学的60个命令

    1.作用 shutdown命令的作用是关闭计算机,它的使用权限是超级用户. 2.格式 shutdown [-h][-i][-k][-m][-t] 3.重要参数 -t:在改变到其它运行级别之前,告诉in ...

  2. JS流程控制语句 重复重复（for循环）语句结构： for(初始化变量;循环条件;循环迭代) { 循环语句 }

    重复重复(for循环) 很多事情不只是做一次,要重复做.如打印10份试卷,每次打印一份,重复这个动作,直到打印完成.这些事情,我们使用循环语句来完成,循环语句,就是重复执行一段代码. for语句结构: ...

  3. windows 内核下获取进程路径

    windows 内核下获取进程路径 思路:1):在EPROCESS结构中获取.此时要用到一个导出函数:PsGetProcessImageFileName,申明如下: NTSYSAPI UCHAR *  ...

  4. 关于Android 的网址

    Android 官方API查询网址 https://developer.android.google.cn/ 第三方镜像Android API查询网址 (比官方浏览速度快一些,缺点现有API较低) h ...

  5. leetcode 132 Palindrome Pairs 2

    lc132 Palindrome Pairs 2 大致与lc131相同,这里要求的是最小分割方案 同样可以分割成子问题 dp[i][j]还是表示s(i~j)是否为palindrome res[i]则用 ...

  6. Python-线程(1)

    目录 什么是线程 进程与线程的区别 开启线程 为什么要使用线程 线程之间数据是共享的 什么是线程 线程与进程都是虚拟单位,目的是为了更好的描述某种事物 进程与线程的区别 进程:资源单位 线程:执行单位 ...

  7. 洛谷 NOIP提高组模拟赛 Day1

    传送门 ## $T1$ 一道结论题,设原来A队能力最大的是x,那么A队的选择方案就是$2^{x-1}$,B队的选择方案就是$(2^{n-x}-1)$种,因为不能不选.其中$1\leq x\leq n$ ...

  8. SpringBoot_01_SpringBoot入门

    1 Spring的优点分析 Spring是Java企业版(Java Enterprise Edition,JEE,也称J2EE)的轻量级代替品.无需开发重量级的Enterprise JavaBean( ...

  9. 2018CCPC吉林赛区 | 部分题解 (HDU6555 HDU6556 HDU6559 HDU6561)

    // 杭电上的重现赛:http://acm.hdu.edu.cn/contests/contest_show.php?cid=867 // 杭电6555~6566可交题 A - The Fool 题目 ...

  10. js 获取字符串中某字符第二次出现的下标

    var res = "a-b-c-d";var index = find(res,'-',1); //字符串res中第二个‘-’的下标 var ress = res.substri ...