自定义下拉框

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;
}