下拉框几种实现方式

1 html select标签下拉框：

 <select onchange="checkTypeChange()" name="checkType">    //onchange触发js
      <option selected="selected" value="0">处理状态</option>
      <option value="1">未处理</option>     //选中，传value值到后台
      <option value="2">已处理</option>
</select>

2 下拉浮层ul   

<!--  显示框 -->
<span class="country_blue" name="country" id="country">中国</span>
<!--  下拉框 -->
<div class="country"  style="top: 563px; left: 658.5px; display: none; ">
<ul>
   <li><a selcountry="241" phonecode="86" href="javascript:void(null)">中国</a></li>
   <li><a selcountry="242" phonecode="853" href="javascript:void(null)">中国澳门</a></li>
   <li><a selcountry="244" phonecode="852" href="javascript:void(null)">中国香港</a></li>
   <li><a selcountry="243" phonecode="886" href="javascript:void(null)">中国台湾</a></li>
   <li><a selcountry="888" href="javascript:void(null)">其他国家/地区</a></li>
</ul>
</div>

 

 

$("#country").toggle(//呼出浮层
   function () {
       var $offset=$(this).offset();
       $(".country").css({top:$offset.top+$h+2,left:$offset.left}); //定位
        $(".country").fadeIn("fast");  //弹出方式
    },
    function () {   
        $(".country").hide();
    }
);

 

3 下拉浮层ul 2，不用定位，html直接做好位置,用jquery show()显示，hide()隐藏。

<div class="cur-mode">经营模式<s></s></div>
   <ul style="display: block; " class="mode-list">
       <li><a href="#">生产型</a></li>
       <li><a href="#">贸易型</a></li>
       <li><a href="#">服务型</a></li>
       <li><a href="#">政府或其他</a></li>
  </ul>