本文是在项目中优化一个功能时,看到前辈实现的JS的下拉列表,之前倒是实现过JAVA实现的下拉列表,可惜以前不研究这些,现在记录下来,给以后留点东西,当然,只是觉得这个确实实现得不错,仅提供一种思路!
var sel = gid(id);
//var a = sel.options;
//可能循环给下拉列表给值
var options = [];
var value = sel.value;
var name = gid(id+"_flexselect").value;
options.push({
value : value,
text : name
});
var a = options;
///
//下面是自制过程
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "</td></tr>";
}
sel.insertAdjacentHTML("beforeBegin","<table border=0 cellpadding=0 cellspacing=0 width='" + strWidth + "'><tr><td><table width='100%' cellpadding=0 cellspacing=0 border=0 class='sel_normal' name='showTable' " +
" οnclick=\"showHide('O" + id + "')\" οnmοuseοut='blOut=false;'><tr bgcolor=white><td style='padding-left:3px;padding-right:3px;' nowrap><input type='hidden' name='C_O" + id + "' id='C_O" + id + "'><DIV class='fixedWidth' style='padding-top:3px;width:" + strWidth2 + "' id='S_O" + id +
"'></DIV></td><td width=\"15\"><img src='" + imgPath + "' /></td></tr></table></td><tr><td><div id='O" + id
+ "' class=\"select\" onselectstart=\"return false\" οnmοuseοver=\"HoverOptions(event);\" οnmοuseοut=\"OutOptions(event);\" οnclick=\"ClickOptions(event, 'O" + id + "');\"><table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%><tbody>" + arr.join('')
+ "</tbody></table></div></td></tr></tbody></table>");