仿select,自定义下拉框

在日常项目中经常会用到一些下拉框，select样式网上查找很少能真正改为自己想要使用的样式，所以很多时候需要使用插件或者自己来写。
网上有很多下拉框的插件，实际上下拉框并不难写，自己就可以实现想要实现的各种样式。
引用：

   <script src="js/jquery-2.1.1.min.js"></script>

html:

    <div class="courseSelect">
        <button type="button" class="dropdownText">测试AAA</button>
        <button type="button" class="dropdownBtn"></button>
        <ul class="dropdown-menu">
          <li data-value="">测试AAA</li>
          <li data-value="">测试BBB</li>
          <li data-value="">测试CCC</li>
          <li data-value="">测试DDD</li>
        </ul>
    </div>

js:

$(".courseSelect").on("click",function(){
  if($(".dropdown-menu").css("display")=="none"){
    $(".dropdown-menu").css("display","block");  
  }else{
    $(".dropdown-menu").css("display","none");   
  }
});
$(".courseSelect").on("click", "ul.dropdown-menu>li", function(){
  var coursename = $(this).text();
  $(this).closest(".courseSelect").find("button.dropdownText").text(coursename);
  $(".dropdown-menu").css("display","none");
})  

$(document).bind("click",function(e){
  if( $(e.target).closest(".courseSelect .dropdownText").length == 0    &&$(e.target).closest(".courseSelect .dropdownBtn").length == 0){
     $(".dropdown-menu").css("display","none");
  }
})

结果：

以上只实现简单的下拉框功能，在实际应用中还需要前端实现各种各样的下拉框样式