利用Div仿Select控件

Html代码：

  工程名搜索
  

    

      
地名地址搜索
      
行政区域搜索
      
燕郊区域搜索
      
无主用地搜索
    
  

CSS代码：

*{font-family:'Microsoft YaHei';font-size:12px;color:#707070;}
ul,li{margin:0px;padding:0px;}
.slDiv{float:left;margin-top:5px;position:relative;}
.slDiv #btnSelect{background:url("../images/selAppear.png") right no-repeat;width:125px;display:inline-block;text-indent:10px;}
.slDiv .ulDiv{display:none;width:125px;border:1px solid #EEEEEE;border-radius:1px;background:#FFF;margin-top:8px;position:absolute;z-index:100;}
.slDiv .ulDiv.ulShow{display:block;}
.slDiv .ulDiv ul li{text-indent:10px;cursor:pointer;}
.slDiv .ulDiv ul li:hover{background:#cbebf6;}

js代码：

$('.slDiv #btnSelect').on('click',function(){
  $(this).siblings('.ulDiv').toggleClass('ulShow');
});
$('.slDiv .ulDiv ul li').on('click',function(){
  var selTxt=$(this).text();
  $('.slDiv #btnSelect').text(selTxt);
  $('.ulDiv').removeClass('ulShow');
});

====> 记录完毕