我们看到的每个网页都有各种类型的下拉框，它们到底是怎么制作出来的呢？有几种方法呢？请看下文吧：
1 html select标签下拉框：
Html代码
复制代码 代码示例:
<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
Html代码
复制代码 代码示例:
<!-- 显示框 -->
<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>
<!-- 显示框 -->
<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>
Js代码
复制代码 代码示例:
$("#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()隐藏。
Ul2代码
复制代码 代码示例:
<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>
以上这几种方法你记住了吗？
