背景
移动端开发中，使用select做下拉框，会导致ios Android下各种样式的不统一以及表现形式的不统一等问题，因此很少使用原生的select来做下拉框选择，而是选择自己模拟下拉框来实现。
插件封装
在网上看了一些别人写的代码，基本上都是这样的，拿过来自己鼓捣了下，记下来方便以后直接使用。如有雷同之处，敬请谅解，有哪些可以改进的还希望路过大神不吝指点。
废话不多说，先上代码：
html结构
<div class="selectBox">
<input id="course" name="course" type="hidden" value="--请选择--" />
<div id="courseBox">
<cite id="courseCite">--请选择--</cite>
<ul style="display: none;">
<li data-input-value="html">html</li>
<li data-input-value="css">css</li>
<li data-input-value="js">js</li>
</ul>
</div>
</div>
说明：
- html结构中的三处id必须设置；
js插件代码
jQuery.selectDiv = function(boxId,inputId,bool){
var selectInput = $(inputId);
var selectCite = $(boxId+" cite");
// 下拉列表的显示与隐藏
selectCite.on("tap click", function(){
var $ul = $(this).next("ul");
if($ul.css("display") == "none"){
$ul.show();
}else{
$ul.hide();
}
});
// 选择框选中后对input的赋值
$(boxId+" ul li").on("tap click", function(){
selectCite.html($(this).text());
selectInput.val($(this).data("inputValue")); // data()方法要求jQuery版本在1.4.3以上
$(this).parent().hide();
});
// 点击任意处弹窗关闭
$("body").on("tap click", function(e) {
if (e.target.id != selectCite.eq(0).attr("id")) { // 考虑到页面中可能会存在多个这样的下拉框，因此在html结构中需要对每个cite设置id，以辨识是哪个下拉框
if($(boxId+" ul").css("display") == "block"){
$(boxId+" ul").hide();
}
}
});
// 默认自动获取第一个值
if(typeof(bool) === "boolean" && bool){
selectCite.html($(boxId+" ul li").eq(0).text());
selectInput.val($(boxId+" ul li").eq(0).data("inputValue"));
}
};
调用方式
$.selectDiv(boxId, inputId, [bool]);
该方法可以接收三个参数：
boxId: 用于模拟select的下拉框盒子的id
inputId: 用于接收下拉选项的值的input元素的id
bool: 是否给下拉框设置默认值，是则设置为true，否可以不传该参数
$.selectDiv("#courseBox","#course",true); // 默认设置下拉框的值为第一个下拉项的值
$.selectDiv("#courseBox","#course");
其实，功能很简单，只是为了记录下来方便以后直接使用。
