如何写⼀个⾃定义的select下拉菜单
⾸先分析⼀下下拉菜单，点击select框，出现下拉菜单，选中下拉菜单的⼀⾏，下拉菜单消失，选中的值出现在select内，这⼀流程其实就是input与ul标签的结合的结果，即select=input+ul
效果图如下：
html代码很简单
<div class="select-group">
<div class="input-group">
<input type="text" name="selected" id="use_idList" value="demo"/>
<span class="input-group-add"></span>
</div>
<ul class="select">
</ul>
</div>
在这⾥ul中可以根据⾃⼰的内容添加li标签，显⽰⾃⼰的下拉菜单内容。其中值得注意的是⽤了event.stopProgration()来阻⽌事件冒泡，避免点击⽂档或点击input时出现事件混乱。
就为实现select效果来说，贴出的代码有很多是多余的，但是在次为什么贴出来呢，当然是为了扩展功能，getProductName(value) ⽅法⽤来请求数据，可通过在input输⼊值的获取数据动态显⽰下拉菜单，这个在实际项⽬中经常⽤到，例如百度的搜索功能。
<!DOCTYPE html>
<html>
<head>
<title>⾃定义下拉框</title>
<link href="cdn.bootcss/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="cdn.bootcss/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet">
<style type="text/css">
.select-group{
padding: 10px;
width:200px;
}
.input-group{
width:100%;
position: relative;
}
.input-group input{
position: relative;
width: 100%;
padding: 10px 10px;
border: 1px solid #ddd;
}
.input-group .input-group-add{
display: block;
position: absolute;
height: 20px;
width: 20px;
background: url(img/angle.png);
background-position-y: 20px;
top: 50%;
margin-top:-10px;
margin-top:-10px;
right:20px;
}
ul.select{
width: 100%;
list-style: none;
padding: 0px;
border: 1px solid #ddd;
display: none;
border-top:none;
}
ul.select li{
padding:5px 10px;
list-style-type: none;
}
</style>
</head>
<body>
<div class="select-group">
<div class="input-group">
<input type="text" name="selected" placeholder="请输⼊产品名称" id="use_idList" value="demo"/>
<span class="input-group-add"></span>
</div>
<ul class="select">
</ul>
</div>
<script src="cdn.bootcss/jquery/3.1.1/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var productName;
$(function(){
var pdtObj={};
$('html').click(function(event){
$('.select-group ul').css({'display':'none'});
});
$("input[name='selected']").keyup(function(event){
event.stopPropagation();
var val = $("input[name='selected']").val();
getProductName(val);
$('ul.select').css({'display':'block'});
});
$(' ul.select').on('click','li',function(event){
event.stopPropagation();
var li_value=$(this).html();
pdtObj.id = productName[$(this).index()].id;
pdtObj.fee = productName[$(this).index()].fee;
$(this).parent().siblings('div.input-group').find("input[name='selected']").val(li_value);
$('ul.select').css({'display':'none'});
});
});
/
/输⼊框获取的产品名称
function getProductName(value){
var data=[{id:'1',name:"first",fee:25},{id:'2',name:"second",fee:30},{id:'3',name:"third",fee:35},{id:'4',name:"fourth",fee:40}];  $("ul.select li").remove();
if(data!=""){
productName = data;
$.each(productName,function(key){
var list= "<li>"+productName[key].name+"</li>";
$("ul.select").append(list);
});
$('ul.select li').hover(function(){
$(this).css({'background':'#fb0'});
},function(){
$(this).css({'background':'#fff'});
$(this).css({'background':'#fff'});
});
}else{
// alert("暂⽆数据！");
return false;
}
}
</script>
html下拉菜单的制作方法</body>
</html>
接下来要做的就是将代码组合做成组件，以后⽤的时候会⽅便很多，例如easyUI中的combobox组件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。