html:
<i>证券公司过滤</i>
<div class="dropdownContainer" id="selBroker">
<div class="dropdownDefault">全部</div>
<span class="downArrow arrow"></span>
<ul class="dropdrown-menu">
<li>全部</li>
<li>华泰证券</li>
<li>东莞证券</li>
<li>东吴证券</li>
<li>山西证券</li>
<li>长城证券</li>
<li>中金证券</li>
<li>广发证券</li>
<li>中原证券</li>
</ul>
</div>
js
var broker = {
全部:0,
华泰证券:1,
东莞证券:2,
东吴证券:3,
山西证券:4,
长城证券:5,
中金证券:6,
广发证券:7,
中原证券:8
};
//点击出现下拉框
$(".dropdownDefault, .dropdownContainer .downArrow").click(function(){
//动态获取下拉框的值
$.ajax({
type: "get",
url: url,
success: function (res) {
$('.dropdrown-menu').empty();
broker={};
broker["全部"]=0;
$('.dropdrown-menu').append('<li>全部</li>');
$.each(res.data.brokers, function () {
broker[this.name]=this.id;
$('.dropdrown-menu').append('<li>'+this.name+'</li>');
});
$(".dropdrown-menu li").click(function(){
$(this).parent().siblings(".dropdownDefault").html($(this).html());
$(this).parent().hide();
if(!broker[$(".dropdownDefault").html()]) {
broker_id = 0;
}else{
broker_id = broker[$(".dropdownDefault").html()];
}
InitTable(1);
});
}
});
$(this).siblings(".dropdrown-menu").show();
});
//点击非下拉框区域收起下拉框
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#selBroker").length == 0){
$(".dropdrown-menu li").parent().hide();
};
e.stopPropagation();
})
css
.dropdownContainer{
width: 300px;
height: 38px;
z-index: 10;
display: inline-block;
margin-left: 15px;
}
.dropdownDefault{
text-align: center;
width: 100%;
height:100%;
border-radius: 4px;
border:1px solid #ddd;
background-color: #f5f5f5;
display: inline-block;
float: left;
line-height: 41px;
}
.dropdrown-menu{
top:100%;
width: 100%;
left: 0;
display: none;
border:1px solid #ddd;
}
.dropdrown-menu li{
display: inline-block;
width: 300px;
height:38px;
text-align: center;
border:1px solid #ddd;
padding-top: 8px;
background-color: #f5f5f5;
}
.arrow{
width: 0;
height: 0;
cursor: pointer;
}