<!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. 制作windows10系统启动U盘，从零开始。

    1.打开百度,搜索windows下载,选个这个点击进去. 2.会看到下图,然后点击立即下载工具按钮. 3.接下来由于网络的原因,可能需要漫长的等待.会下载一个MediaCreationTool1903 ...

  2. HTML-完美解决父子元素的外边距重叠和高度塌陷问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 【CQOI2015】选数

    题面 Description 我们知道,从区间[L,H](L和H为整数)中选取N个整数,总共有(H-L+1)^N种方案.小z很好奇这样选出的数的最大公约数的规律,他决定对每种方案选出的N个整数都求一次 ...

  4. Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下

    在Linux中要重启apache服务与在windows是有很大的区别,下面我们来介绍一下常用的命令,需要的朋友参考下吧(http://www.hnkjlb.com) linux系统为Ubuntu 一. ...

  5. vs Code打开新的文件会覆盖窗口中的文件？

    这是因为你单击文件名的缘故,这个是“预览模式”,所以再单击其他文件时,会覆盖当前打开的文件. 如果你要每次都打开新tab,那就双击文件名好了.这个逻辑和sublime是一样的. 补充: 预览模式是现在 ...

  6. 02.vs插件 获取项目和解决方案路径

    获取项目 解决方案路径 /// <summary> /// 获取并设置项目和解决方案绝对路径 /// </summary> /// <returns></re ...

  7. Gen8折腾日记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月7日,可惜在博客园这边不能修改发布时间.) 放假伊始,老大订购了两台服务器,一台是Dell的R630,用于其他 ...

  8. cesium-长度测量和面积测量

    网上找的大神的实现方法有点问题,实现有一些bug,作为cesium新手一个,弃之不忍,只好硬着头皮修改了,不过还好问题不大,再次mark一下,下次就可以直接用了   image.png import ...

  9. linux最基础最常用的命令快速手记 — 让手指跟上思考的速度（三）

    这一篇作为姐妹篇的第三篇,废话不多说,我觉得这个比mysql的还要重要,为什么,一旦你摊上linux 敲键盘输入命令简直是要飞的速度,不断的卡壳查命令,效率太低了,而且非常严重的影响思绪,思绪! 某些 ...

  10. adb环境部署及与模拟器的连接

    1.下载adt-bundle-windows-x64安装包,下载网址https://www.7down.com/soft/293453.html 2.对安装包进行解压缩 3.配置环境变量,将adb的路 ...