1.先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<span style="float: left;line-height: 30px;margin-right:10px;">请选择</span>
<label for="" class="label">
<p class="ed">sdddddd</p>
<ul class="select">
<li>3444444334541</li>
<li>3444444334542</li>
<li>3444444334543</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334546</li>
<li>3444444334547</li>
<li>3444444334548</li>
</ul>
</label>
</div>
<script>
$('.ed').click(function() {
$('.select ').slideToggle();
});
$('.select li').click(function() {
var text = $(this).text();
$('.ed').text(text);
$('.select ').hide();
})
$(document).click(function(e) { //点击空白处关闭当前弹窗
var _con = $('.label'); // 设置目标区域
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
$('.select').hide();
}
});
</script>
</body>
<style>
* {
margin: 0px;
padding: 0px
}
.box {
margin: 20px;
width: 310px;
position: relative;
}
ul li {
list-style-type: none;
}
.ed {
border: 1px solid #ddd;
float: left;
width: 250px;
cursor: pointer;
position: relative;
text-indent: 10px;
height: 30px;
line-height: 30px;
}
.select {
float: left;
width: 250px;
position: absolute;
display: none;
right: 0px;
top: 30px;
border: 1px solid #ddd;
border-top: none;
text-indent: 10px;
max-height: 200px;
overflow: auto;
}
.select li {
height: 30px;
cursor: pointer;
line-height: 30px;
}
</style>
</html>
2.要点：
01.通过控制‘ul’的显示隐藏来模拟option，最上边给个标签代表已选择
02.点击空白处隐藏‘ul’.通过e.target实现