div模拟select下拉菜单

最新推荐文章于 2021-11-12 12:39:29 发布

super牛牛

最新推荐文章于 2021-11-12 12:39:29 发布

阅读量794

点赞数

分类专栏： javascript 文章标签： div select下拉框 csdn

本文链接：https://blog.csdn.net/u012668297/article/details/37694369

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟select下拉菜单</title>
<style type="text/css">
.mod_select {
position: absolute;
left: 30%;
top: 100px;
font-familY: Arial, Helvetica, sans-serif;
}

.mod_select ul {
margin: 0;
padding: 0;
}

.mod_select ul li {
list-style-type: none;
float: left;
margin-left: 20px;
height: 24px;
}

.select_label {
color: #982F4D;
float: left;
line-height: 24px;
padding-right: 10px;
font-size: 12px;
font-weight: 700;
}

.select_box {
float: left;
border: solid 1px #EDE7D6;
color: #444;
position: relative;
cursor: pointer;
width: 165px;
background: url() repeat-x;
font-size: 12px;
}

.selet_open {
display: inline-block;
border-left: solid 1px #E5E5E5;
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 24px;
background: url() no-repeat center center;
}

.select_txt {
display: inline-block;
padding-left: 10px;
width: 135px;
line-height: 24px;
height: 24px;
cursor: text;
overflow: hidden;
}

.option {
width: 165px;;
border: solid 1px #EDE7D6;
position: absolute;
top: 24px;
left: -1px;
z-index: 2;
overflow: hidden;
display: none;
}

.option a {
display: block;
height: 26px;
line-height: 26px;
text-align: left;
padding: 0 10px;
width: 100%;
background: #fff;
}

.option a:hover {
background: #FDE0E5;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function() {
$(".select_box").click(function(event) {
event.stopPropagation();
$(this).find(".option").toggle();
$(this).parent().siblings().find(".option").hide();
});
$(document).click(
function(event) {
var eo = $(event.target);
if ($(".select_box").is(":visible")
&& eo.attr("class") != "option"
&& !eo.parent(".option").length)
$('.option').hide();
});
/*赋值给文本框*/
$(".option a").click(function() {
var value = $(this).text();
$(this).parent().siblings(".select_txt").text(value);
$("#select_value").val(value)
})
})
</script>
</head>
<body>
<div class="mod_select">
<ul>
<li>
<span class="select_label">江苏:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"><b></b>
</a>
<div class="option">
<a>南京</a>
<a>苏州</a>
<a>无锡</a>
</div>
</div>
<br clear="all" />
</li>
<li>
<span class="select_label">水果:</span>
<div class="select_box">
<span class="select_txt"></span><a class="selet_open"></a>
<div class="option">
<a>苹果</a>
<a>香蕉</a>
<a>榴莲</a>
</div>
</div>
</li>
</ul>
<input type="hidden" id="select_value" />
</div>
</body>
</html>