<!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. Shuffle过程详解

  2. mysqldump使用记录

    #导出单个数据库:结构 无数据 [root@localhost ~]#mysqldump -h127.0.0.1 -uroot -p --opt --no-data db_name >~/db_ ...

  3. 看 《android权威编程指南》 的笔记

    Android 编译工具 确保ant已安装并正常运行,android sdk的tools/和platform-tools目录包含在可执行文件的搜索路径中 切换到项目目录并执行以下命令: android ...

  4. angularjs 1 Failed to read the 'selectionStart' property from 'HTMLInputElement':

    在找angularjs input(type='number')在获取焦点的时候,文本框内容选中效果,参考了:Select text on input focus,我直接复制他的code之后,在ion ...

  5. 如何玩转跨库Join？跨数据库实例查询应用实践

    背景 随着业务复杂程度的提高.数据规模的增长,越来越多的公司选择对其在线业务数据库进行垂直或水平拆分,甚至选择不同的数据库类型以满足其业务需求.原本在同一数据库实例里就能实现的SQL查询,现在需要跨多 ...

  6. LUOGU P1967 货车运输(最大生成树+树剖+线段树)

    传送门 解题思路 货车所走的路径一定是最大生成树上的路径,所以先跑一个最大生成树,之后就是求一条路径上的最小值,用树剖+线段树,注意图可能不连通.将边权下放到点权上,但x,y路径上的lca的答案不能算 ...

  7. 33 N皇后问题

    原题网址:https://www.lintcode.com/zh-cn/old/problem/n-queens/# n皇后问题是将n个皇后放置在n*n的棋盘上,皇后彼此之间不能相互攻击. 给定一个整 ...

  8. sqlmap：wins系统+python3上安装

    python2和python3互不兼容,SqlMap是基于python2的,所以SqlMap不支持python3,这里使用virtualenvwrapper切换python版本: 一.sqlmap的安 ...

  9. C++【string】用法和例子

    /*** * string 基础api复习 * 8 AUG 2018 */ #include <iostream> #include <string> using namesp ...

  10. vue 组件内引入外部在线js、css

    参考:https://blog.csdn.net/u010881899/article/details/80895661 例:引入element-ui js: mounted() { const oS ...