仿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");  }})

结果：

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