下拉框插件的详解

本插件是基于jQuery实现的

function DropSelect(obj){     

　　obj = obj || {};
　　var p = this;
　　p.id = obj.id || 'selectDrop'; //这个id为页面上的元素的id，一般为添加下拉框的div元素
　　p.data = obj.data || [];      

　　//传入此下拉框插件的数据是一个数组形式的对象[{text: '', value: ''},{text: '', value: ''}]，每一项就是下拉框的每一行（每一选项）
　　if (p.data && !p.data.length) {    //如果数组选项为0，就把{text: '请选择', value: ''}加入p.data数组中。下拉框就只会显示请选择
　　　　p.data = $.unique($.merge(p.data, [
　　　　　　{text: '请选择', value: ""}
　　　　]));
　　} 
　 
　　p.selectedValue = 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 == 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 = 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 == 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="###" 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='" + 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="###"><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方法。

 

 

加油！