<!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. GridView编辑删除

    A前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.asp ...

  2. img属性src的特点

    img属性src的特点: src=“图片地址” 成功则加载图片,失败则显示alt文字和断裂的图片 src="" 则不加载,不显示alt文字和断裂的图片 因此当图片加载失败后,$(& ...

  3. 在python3中的编码

    在python3中的编码 #_author:Administrator#date:2019/10/29import sysprint(sys.getdefaultencoding())#utf-8 打 ...

  4. Python基础笔记_Number类型

    import random import math import operator # 数字 # # 1. Python math 模块.cmath 模块 ''' Python math 模块.cma ...

  5. 基于OneMap的水利行业共享服务平台搭建步骤

    今天上午再次学习Esri技术培训中心的“GIS服务共享与运维管理——之OneMap解决方案”课程,从中学习了OneMap的产品架构以及基于OneMap共享服务平台的搭建步骤.下面把其中水利行业的共享服 ...

  6. 软件-版本控制器-VisualSVN：VisualSVN

    ylbtech-软件-版本控制器-VisualSVN:VisualSVN VisualSVN 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https:/ ...

  7. Android基础控件ImageView的使用

    1.相关属性 <!--src 设置内容--> <!--background 设置背景--> <!--alpha 设置透明度 --> <!--adjustVie ...

  8. 博弈论 | 暑期集训Day2学习总结

    今天的知识点为博弈论. 相比于昨天完全陌生难懂的概念,今天接触到的东西应该算是非常容易理解了,一下子又对ACM的学习重拾信心.毕竟game作为主题也吸引眼球,每种博弈背景下引入的游戏介绍也十分有趣.主 ...

  9. java调js基础

    public static void main(String[] args)throws Exception { ScriptEngine se = new ScriptEngineManager() ...

  10. neo4j 实战、实例、示例 创建电影关系图 -1

    1. 创建关系 因为代码占篇幅太大,创建整个"电源关系图"的代码在文章最下方. 2. 简单分析创建语句 2.1 创建电影节点 CREATE (TheMatrix:Movie {ti ...