日期:2014-05-16  浏览次数:20445 次

JS实现的下拉列表

本文是在项目中优化一个功能时,看到前辈实现的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' " +
???? ??" onclick=\"showHide('O" + id + "')\" onmouseout='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\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\"><table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%><tbody>" + arr.join('')
???? + "</tbody></table></div></td></tr></tbody></table>");