背景
移動端開發(fā)中，使用select做下拉框浇坐，會導(dǎo)致ios Android下各種樣式的不統(tǒng)一以及表現(xiàn)形式的不統(tǒng)一等問題，因此很少使用原生的select來做下拉框選擇，而是選擇自己模擬下拉框來實現(xiàn)孕似。
插件封裝
在網(wǎng)上看了一些別人寫的代碼，基本上都是這樣的刮刑，拿過來自己鼓搗了下喉祭，記下來方便以后直接使用。如有雷同之處雷绢，敬請諒解泛烙，有哪些可以改進(jìn)的還希望路過大神不吝指點。
廢話不多說翘紊，先上代碼：
html結(jié)構(gòu)
<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結(jié)構(gòu)中的三處id必須設(shè)置胶惰；
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();
});
// 點擊任意處彈窗關(guān)閉
$("body").on("tap click", function(e) {
if (e.target.id != selectCite.eq(0).attr("id")) { // 考慮到頁面中可能會存在多個這樣的下拉框，因此在html結(jié)構(gòu)中需要對每個cite設(shè)置id霞溪，以辨識是哪個下拉框
if($(boxId+" ul").css("display") == "block"){
$(boxId+" ul").hide();
}
}
});
// 默認(rèn)自動獲取第一個值
if(typeof(bool) === "boolean" && bool){
selectCite.html($(boxId+" ul li").eq(0).text());
selectInput.val($(boxId+" ul li").eq(0).data("inputValue"));
}
};
調(diào)用方式
$.selectDiv(boxId, inputId, [bool]);
該方法可以接收三個參數(shù)：
boxId: 用于模擬select的下拉框盒子的id
inputId: 用于接收下拉選項的值的input元素的id
bool: 是否給下拉框設(shè)置默認(rèn)值孵滞，是則設(shè)置為true中捆，否可以不傳該參數(shù)
$.selectDiv("#courseBox","#course",true); // 默認(rèn)設(shè)置下拉框的值為第一個下拉項的值
$.selectDiv("#courseBox","#course");
其實，功能很簡單坊饶，只是為了記錄下來方便以后直接使用泄伪。
