jquery模拟SELECT下拉框取值效果
发布时间：2024-04-22 12:58:56
标签：jquery,模拟SELECT,下拉框
jquery模拟SELECT框，效果图如下： 
<!DOCTYPE html>
<html lang="en">
<head>
<title>jquery模拟SELECT框</title>
<meta charset="utf-8">
<style>
body{padding:0;margin:0;font-size:12px;}
ul,li{list-style:none;padding:0;margin:0;}
#dropdown{width:186px; margin:100px auto; position:relative}
.input_select{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat rightright 4px; color:#807a62; }
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; position:absolute; display:none}
#dropdown ul li{height:24px; line-height:24px; text-indent:10px}
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none}
#dropdown ul li a:hover{background:#c6dbfc; color:#369}
#result{margin-top:10px;text-align:center}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".input_select").click(function(){
var ul = $("#dropdown ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
}else{
ul.slideUp("fast");
}
});
$("#dropdown ul li a").click(function(){
var txt = $(this).text();
$(".input_select").val(txt);
var value = $(this).attr("rel");
$("#dropdown ul").hide();
$("#result").html("您选择了"+txt+"，值为："+value);
});
});
</script>
</head>
<body>
<div id="dropdown">
<input class="input_select" type="text" value="请选择城市"/>
<ul>
<li><a href="#" rel="2">北京</a></li>
<li><a href="#" rel="3">上海</a></li>
<li><a href="#" rel="4">武汉</a></li>
<li><a href="#" rel="5">广州</a></li>
</ul>
</div>
<div id="result"></div>
</body>
</html>
0
投稿猜你喜欢
滑动拼图验证码可以算是滑块验证码的进阶版本，其验证机制相对复杂。本节将介绍两种滑动拼图验证码：初级版和高级版本。初级版滑块拼图验证码初级版滑- HTML代码如下，其中，要拖动的div为最外层的div <div id="dialog_createUserGroup&qu
- <html><head><title>不刷新页面查询的方法</title><meta
- 这是一个基于Go语言开发的单点登录系统，实现手机号注册、手机号+验证码登录、手机号+密码登录、账号登出等功能，用户认证采用cookie和jw
- Python 中 ‘unicodeescape' codec can't decode bytes in position
- 一 multiprocessing模块介绍python中的多线程无法利用多核优势，如果想要充分地使用多核CPU的资源（os.cpu\_cou
- 前言:Turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0,0)位置开
- 本文实例为大家分享了python实现银行实战系统的具体代码，供大家参考，具体内容如下先附上源代码：│ admin.py
- 结合mysql数据库查询，实现分页效果@user.route("/user_list",methods=['PO
- python包含子目录中的模块方法比较简单，关键是能够在sys.path里面找到通向模块文件的路径。下面将具体介绍几种常用情况:（1）主程序
- 说明之前下载来zip包的漫画，里面的图片都是两张一起的：但是某些漫画查看软件不支持自动分屏，看起来会比较不舒服，所以只能自己动手来切分。操作
- 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢，仅允许输入整数数字或者带小数点的数字。下面这段代码也许能帮到你！通过对当前输入框定
- 做渗透测试的时候，有个比较大的项目，里面有几百个网站，这样你必须首先确定哪些网站是正常，哪些网站是不正常的。所以自己就编了一个小脚本，为以后
- 最近无意看到网上有人使用Python编写几十行代码生成图像验证码，感觉很是繁琐，这里为各位朋友推荐两种方法，使用4行Python代码即可生成
- 本章内容，我们主要来讲一下Python内置的HTML解析库HTMLParser模块，基本上也是应用于页面抓取上，假设，我们需要去收集页面上已
- 阅读器访问地址：http://easyrss.tk/，欢迎体验！阅读导览一、 概述 二、 设计的基本概念和原理 三、 设计方案四、 主要源代
- 最好的学习方式就是实践。 我们通过导入gin包来深入学习。环境go 1.13.5goland 2019.3.1manjaro-gnome3.
- PHP children() 函数实例查找 note 节点的子节点：<?php $note=<<<XML<no
- 前言这篇博文的目的是演示如何使用 OpenCV、Python 和面部标志对齐人脸。给定一组面部标志（输入坐标），我们的目标是将图像扭曲并转换
- 本节内容学习帮助大家梳理神经网络训练的架构。一般我们训练神经网络有以下步骤：导入库设置训练参数的初始值导入数据集并制作数据集定义神经网络架构
