首页 > 代码库 > 下拉框插件的详解
下拉框插件的详解
本插件是基于jQuery实现的
function DropSelect(obj){
obj = obj || {};
var p = this;
p.id = obj.id || ‘selectDrop‘; //这个id为页面上的元素的id，一般为添加下拉框的div元素
p.data = http://www.mamicode.com/obj.data || [];
//传入此下拉框插件的数据是一个数组形式的对象[{text: ‘‘, value: ‘‘},{text: ‘‘, value: ‘‘}]，每一项就是下拉框的每一行（每一选项）
if (p.data && !p.data.length) { //如果数组选项为0，就把{text: ‘请选择‘, value: ‘‘}加入p.data数组中。下拉框就只会显示请选择
p.data = http://www.mamicode.com/$.unique($.merge(p.data, [
{text: ‘请选择‘, value: ""}
]));
}
p.selectedValue = http://www.mamicode.com/obj.selectedValue || 0; //设置默认选中值
p.width = obj.width; //下拉框的宽度，默认是容器的宽度，也就是添加下拉框的页面上的div元素的宽度。
p.height = obj.height || 80;
p.zIndex = obj.zIndex || 200;
p.widthStr = "width:" + p.width + "px;"; //控件宽度
p.heightStr = "height:" + (p.height=="auto"?"auto;":(p.height + "px;")); //控件高度
//处理数据一万条时
if(p.height == 80 && p.data.length < 4 ){ //当hegiht属性没写时，数据小于4条时，插件就显示几条数据（高度自适应）。
p.heightStr = "height:auto" ;
}else if(p.height == 80&&p.data.length > 3 ){//当hegiht属性没写时，数据大于3条时，插件的高度还是80，其他的，通过滚动条拖动。
p.heightStr = "height:80px" ;
}
//控件相关id的集合
p.idList = {
text: "drop_Text_" + p.id, //显示选择项的div的子元素span的id
ul: "drop_UL_" + p.id, //下拉框ul的id
dropSelect: "drop_select_" + p.id, //显示选择项的div的id
control: "drp_control" + p.id //整个插件div的id
};
p.itemClick = obj.itemClick || function () {}; //点击触发的回调方法
p.init();
}
DropSelect.prototype = {
init: function () {
var p = this, doc = document;
$("#" + p.id).append(p._getHTML()); //生成下拉框，添加到页面的div元素中去。
p.loadEvent(); //绑定事件
},
loadEvent: function (obj) {
var p = this;
$("#" + p.idList.dropSelect).click(function () { //点击显示选择项的标签时
$("#" + p.idList.control).addClass("open") //给整个插件的div添加open类，可以在css中设置.open的样式，这样就可以改变整个插件的样式。显示下拉框
});
//点击下拉框内容中的值
$("#" + p.idList.ul).click(function (event) { //事件委托机制
var target = event.target;
if (target.nodeName == "A") {
var val = target.getAttribute("val"),
text = target.getAttribute("text");
$("#" + p.idList.text).html(text); //把选择的值，替换到显示的span中去
$("#" + p.idList.text).attr("val", val);
$("#" + p.id).find("[type=‘hidden‘]").val(val); //修改隐藏的input的值。
$("#" + p.idList.control).removeClass("open") //移除open类，隐藏下拉框
if (p.itemClick) {
p.itemClick(val, p.data); //如果有回调方法，就把选择的值，以及整个下拉框的数据传进去。
}
}
});
//失去焦点隐藏下拉列表框
$(document).unbind("click", _click).bind("click", _click);
function _click(e) {
var target = $(e.target);
if (target.closest(".drp_control").length == 0) {
//下拉框插件的drp_control类,closest方法，从当前元素开始，查找祖先元素，查到一个就结束。父亲->父亲->父亲....，所以如果点击的不是下拉框插件上的元素，就将返回0个jQuery对象
$("#" + p.idList.control).removeClass("open");
}
}
return;
},
getValue: function () {
return $("#" + this.idList.dropSelect).find("#" + this.idList.text).attr("val"); //得到选择的选项的value值。
},
setValue: function (value) {
var drp_div = $("#" + this.id);
for (var i = 0; i < this.data.length; i++) {
var val = this.data[i];
if (val.value =http://www.mamicode.com/= value) {
drp_div.find("#" + this.idList.text).html(val.text);
drp_div.find("#" + this.idList.text).attr("val", val.value);
drp_div.find("[type=‘hidden‘]").val(value);
}
}
},
_getHTML: function () {
var p = this;
var html = [];
var isSelectHTML = false;
var sValue = http://www.mamicode.com/p.selectedValue; //默认为0
var defaultVal = this.data[0].value;//如果传入了数据，就是数据的第一项为默认选项。如果没有传入数据，请选择为默认选项
var defaultText = this.data[0].text;
html.push(‘<ul class="fake_slt_menu popList" style="‘ + this.heightStr + (this.width ? "width:" + this.width + "px" : "") + ‘" id="‘ + this.idList.ul + ‘">‘); //下拉框的宽度和高度设置
for (var i = 0; i < this.data.length; i++) {
var val = this.data[i];
if (val.value =http://www.mamicode.com/= p.selectedValue) {
//下拉框默认选中的值，如果没有传入数据，那么data中只有一个{text: ‘请选择‘, value: ""}，如果传入了数据，就看那个的value等于默认选择的value。
defaultVal = val.value || "";
defaultText = val.text || "";
}
/* 给下拉框没显示完整的值加鼠标提示 */
var sTitle = "";
if(!!val.title){ //有可能text值太长，看不了，用title的形式显示出来
sTitle = val.title;
}
html.push(‘<li id="li_‘ + this.id + ‘_‘ + val.value + ‘"><a href="http://www.mamicode.com/###" title="‘+sTitle+‘" val="‘ + val.value + ‘" text="‘ + val.text + ‘" ‘ + ‘>‘ + val.text + ‘</a></li>‘)
}
html.push("</ul></div>"); //创建完下拉框后，还需要添加一个div来显示下拉框选择的值
html.push("<input name=\"" + this.id + "\" type=\"hidden\" value=http://www.mamicode.com/‘" + defaultVal + "‘ />"); //隐藏的input，用来把选择的值，发送给后台。
html.unshift(‘<div class="fake_slt drp_control" id="‘ + this.idList.control + ‘"><div id="‘ + this.idList.dropSelect + ‘"><span style="height:29px;‘ + (this.width ? "width:" + (this.width - 40) + "px" : "") + ‘" class="fake_slt_txt" id="‘ + this.idList.text + ‘" val="‘ + defaultVal + ‘">‘ + defaultText + ‘</span><a class="fake_slt_a" href="http://www.mamicode.com/###"><i class="i-bdown"></i></a></div>‘);
//unshift在数组前面添加字符串。整个的结构就是<div id=this.idList.control><div id=this.idList.dropSelect></div><ul id=this.idList.ul><li></li></ul></div>，this.idList.dropSelect的div是用户选择下拉框的选项后，显示的地方，也就是下拉框默认显示内容的地方。
return html.join("");
}
}
你要使用这个插件的话，只要
new DropSelect({
id: "preferenList", //页面上div的id
data: drpData, //显示的数据，格式为[{text:"",value:"",titile:""},{text:"",value:"",titile:""}]
height: 120, //下拉框高度
width: 80, //下拉框宽度
selectedValue :1, //默认显示的选项
itemClick :function(){} //选择选项后，执行的回调方法
});
如果需要把下拉框选择的值，发送给后台，你只要取类型为隐藏的input，并且id为页面div的id的value值。当然也可以使用getValue方法。
加油！
下拉框插件的详解