JS+DIV模拟SELECT表单元素

<html> <head> <meta charset="UTF-8"> <title>JS+DIV模拟SELECT表单元素</title> <script language="javascript"> selOptions = { name : "selOptions",//此处为数组的名称 data : new Array() } selOptions.data[0] = new Array("0","option0") selOptions.data[1] = new Array("1","option1") selOptions.data[2] = new Array("2","option2") selOptions.data[3] = new Array("3","option3") selOptions.data[4] = new Array("4","option4") selOptions.data[5] = new Array("5","option5") selOptions.data[6] = new Array("6","option6") selOptions.data[7] = new Array("7","option7") selOptions.data[8] = new Array("8","option8") selOptions.data[9] = new Array("9","option9") selOptions.data[10] = new Array("10","option10") selOptions.data[11] = new Array("11","option11") selOptions.data[12] = new Array("12","option12") selOptions.data[13] = new Array("13","option13") selOptions.data[14] = new Array("14","option14") selOptions.data[15] = new Array("15","option15") tmhSelect = { //主调函数 //参数含义：容器，名称，数据[数组]，默认项，宽度，动作(目标函数不能带参) show : function(obj,selectName,dataObj,selOption,width,action){ var data = dataObj.data; var _Obj = document.getElementById(obj); if(!_Obj || typeof(_Obj) == "undefined"){return false;} var s1 = document.createElement("div"); if(isNaN(width) || width==""){width=150;}else if(width<26){width=26;} s1.style.width = width; s1.onmouseleave = function(){tmhSelect.hidden(selectName)}; var str = ""; //判断是否有数据 if(data.length > 0){ //有数据时显示数据选项列表 str += "<input type='hidden' name='"+ selectName +"' id='"+ selectName +"' value='"+ tmhSelect.relv(selOption,data) +"'>"; str += "<div id='_a_"+ selectName +"' style='width:"+ width +"px;height:18px; border:1px #666666 solid;'>"; str += "<div id='_v_"+ selectName +"' style='position:relative;float:left;left:2px;width:"+ (width-22) +"px;height:18px;font-size:12px;overflow:hidden;line-height:18px;' onclick=\"tmhSelect.showOptions('"+ selectName +"');\">"+ tmhSelect.reStr(data,selOption) +"</div>"; str += "<div style='position:relative;float:right;right:0px;width:18px;height:18px;text-align:center;font-family:Webdings;font-size:16px;overflow:hidden;background-color:#CCCCCC;cursor:pointer!important;cursor:hand;' onclick=\"tmhSelect.showOptions('"+ selectName +"');\">6</div>"; str += "</div>"; str += "<div id='_b_"+ selectName +"' style='position:absolute; background-color:#FFFFFF; width:"+ width +"px; height:"+ tmhSelect.height(data.length) +"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none; z-index:99999;'>"; for(i=0;i<data.length;i++){ str += "<div id='_s_"+ selectName +"' style='"+ tmhSelect.style(1,data[i][0],selOption) +"' onmouseover=\"tmhSelect.css(2,this,'"+ data[i][0] +"','"+ selectName +"')\" onmouseout=\"tmhSelect.css(1,this,'"+ data[i][0] +"','"+ selectName +"')\" onclick=\"tmhSelect.selected(this,'"+ data[i][0] +"',"+ dataObj.name +",'"+ action +"')\">"+ data[i][1] +"</div>"; } str += "</div>"; }else{ //没有数据时显示一个空窗体 str += "<input type='hidden' name='"+ selectName +"' id='"+ selectName +"' value='"+ selOption +"'>"; str += "<div id='_a_"+ selectName +"' style='width:"+ width +"px;height:18px; border:1px #666666 solid;'>"; str += "<div id='_v_"+ selectName +"' style='position:relative;float:left;left:2px;width:"+ (width-22) +"px;height:18px;font-size:12px;overflow:hidden;line-height:18px;' onclick=\"tmhSelect.showOptions('"+ selectName +"');\"></div>"; str += "<div style='position:relative;float:right;right:0px;width:18px;height:18px;text-align:center;font-family:Webdings;font-size:16px;overflow:hidden;background-color:#CCCCCC;cursor:pointer!important;cursor:hand;' onclick=\"tmhSelect.showOptions('"+ selectName +"');\">6</div>"; str += "</div>"; str += "<div id='_b_"+ selectName +"' style='position:absolute; background-color:#FFFFFF; width:"+ width +"px; height:"+ tmhSelect.height(0) +"px;border:1px #666666 solid;overflow-x:hidden;overflow-y:auto;display:none; z-index:99999;'></div>"; } s1.innerHTML = str; _Obj.appendChild(s1); }, //返回选定项的值 value : function(n){return document.getElementById(n).value;}, //返回选定项的文本 text : function(n){return document.getElementById("_v_"+ n).innerText;}, selected : function(o,v,dn,action){ var d = dn.data; var n = o.id.replace(/(_s_)/gi,"") document.getElementById(n).value = v; document.getElementById("_v_"+ n).innerHTML = tmhSelect.reStr(d,v); tmhSelect.showOptions(n) for(var i=0;i<document.getElementById("_b_"+ n).childNodes.length;i++){ document.getElementById("_b_"+ n).childNodes[i].style.cssText = tmhSelect.style(1) } o.style.cssText = tmhSelect.style(2); if(action!="" && action != null){ try{eval(action)}catch(e){} } }, relv : function(v,d){ for(i=0;i<d.length;i++){ if(d[i][0] == v){ return v; } } if(v == null || v == ""){ return d[0][0]; } }, reStr : function(d,m){ for(i=0;i<d.length;i++){ if(d[i][0] == m){ return d[i][1]; } } if(m == null || m == ""){ return d[0][1]; } }, height : function(l){var h;if(l>10 || l<1)h = 10 * 15; else h = l * 15; h += 2;return h;}, showOptions : function(n){ var o = document.getElementById("_b_"+ n) if(o.style.display == "none") o.style.display =""; else o.style.display ="none"; _selectOptionsElm = o; }, hidden : function(n){ document.getElementById("_b_"+ n).style.display ="none"; }, style : function(m,v1,v2){ var cs = ""; if(v1 == v2 && v1!="" && v1!=null){m=2;} switch(m){ case 1: cs = "height:15px; font-size:12px; line-height:15px; overflow:hidden; background-color:#FFFFFF; color:#000000; font-weight:normal;"; break; case 2: cs = "height:15px; font-size:12px; line-height:15px; overflow:hidden; background-color:#315DAD; color:#FFFFFF; font-weight:bold;"; break; } return cs; }, css : function(s,obj,v,n){ var v1 = document.getElementById(n).value; if(v == v1){ obj.style.cssText = tmhSelect.style(2); return; }else{ obj.style.cssText = tmhSelect.style(s) } } } function test(){ alert(tmhSelect.value('test')); } </script> </head> <body> <div id="testdiv"></div><BR /> <input type="button" name="button" value="查看文本" onclick="alert(tmhSelect.text('test'))" /> <input type="button" name="button" value="查看选项值" onclick="alert(tmhSelect.value('test'))" /> <script language="javascript"> tmhSelect.show("testdiv","test",selOptions,"",160,"test()"); </script> </body> </html>

提示：你可以先修改部分代码再运行。

http://blog.163.com/chenmanyi0818@126/blog/static/2001260200772044155574/

转载请注明：有爱前端 » JS+DIV模拟SELECT表单元素