DIV模拟select

技术2022-05-11 105

select.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV模拟select</title></head><style>li{list-style-type:none;}

</style><body><script type="text/javascript" language="JavaScript" src="select.js"></script>

<br><table width="500" border="1" cellspacing="1" cellpadding="1" style="width:200px;margin-left:20px;margin-top:10px;"> <tr> <td style="width:150px;"><script>var sltCName = new selectWhb("sltCName");

sltCName.addOption("中华人民共和国万万岁0","0");

sltCName.addOption("中华人民共和国万万岁1","1");

sltCName.addOption("中华人民共和国万万岁2","2");

sltCName.addOption("中华人民共和国万万岁3","3");

sltCName.init();

</script> </td> <td><input type="button" name="Submit" value="检查结果" onClick="alert('sltCName.value='+document.getElementById('sltCName').value)" style="width:60px;border:1px solid #999999;padding-top:3px;background:#f0f0f0;" /></td> </tr> <tr> <td><script>var objSelect2 = new selectWhb("objSelect2");objSelect2.width = 150;objSelect2.addOption("中华人民共和国万万岁","1");objSelect2.addOption("发财改革委员会","2");objSelect2.addOption("中国工商银行中国工商银行","3");objSelect2.init();

</script> </td> <td> <script>var objSelect3 = new selectWhb("objSelect3");objSelect3.addOption("中华人民共和国万万岁","1");objSelect3.addOption("发财改革委员会","2");objSelect3.addOption("中国工商银行中国工商银行","3");objSelect3.init();

</script></td> </tr> <tr><td><script>var COMPANY_Type = new selectWhb("COMPANY_Type"); COMPANY_Type.addOption("普通SP","1"); COMPANY_Type.addOption("CP","3"); COMPANY_Type.addOption("OSP","4"); COMPANY_Type.addOption("非认证公司","5");COMPANY_Type.init();</script> </td><td>test</td></tr></table>

</body></html>

select.js

// 特别感谢的兄弟大力支持//*****************************************************************************

// Determine browser and version.

function Browser() { var ua, s, i;

this.isIE = false; // Internet Explorer this.isNS = false; // Netscape this.version = null; this.name = "" ; this.getBrowserName = getBrowserName; ua = navigator.userAgent;

s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); this.name = s; return; }

s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); this.name = s; return; }

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; this.name = s; return; } s = "Opera"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = 6.1; this.name = s; return; }}

function getBrowserName(){ return this.name; }

function Option(html, value, css, selected) { this.text = html; this.value = value; this.css = css; this.isSelected = selected; }function selectWhb(name){ this.name = name; this.id = name; this.width = 125; this.height = 25; this.fontSize = 10; this.isOpened = false ; this.dataArray = new Array(); this.browser = new Browser(); this.init = selectInit; this.writeCss = writeCssSlt; this.writeObject = writeSelect; this.onClickBtn = onClickSlt; this.onSelected = onSelectedSlt; this.onClickOption = onClickOption; this.hiddenDiv = hiddenOption; this.changeColor = changeOptionColor; this.changeColorBack = changeOptionColorBack; this.onLeaveSelect = onLeaveSelect; this.isLeave = isLeaveSelect; this.addOption = addSelectOption; this.getTextByte = getTextByte; this.subTextByteString = subTextByteString;

}

function addSelectOption(text,value,css, selected){ this.dataArray[this.dataArray.length] = new Option(text,value,css, selected);}

function selectInit() { this.writeCss(this); this.writeObject(this);}function writeCssSlt(){

document.write(".pCss"+this.name+"{list-style-type:none;cursor:hand; margin:0px;font-size:"+this.fontSize+"pt;overflow:hidden;width:"+optiontWight+"px;height:16px;border:0px solid red;margin:0px;word-break:keep-all;padding-top:4px;}"); document.write(".btnIE(float:left;width:20px;height:22px;)"); document.write(".btnNS(width:20px;height:22px;)"); document.write("</style>");}

function writeSelect(){

document.write("<div id=/"sltWhb"+this.name+"/" onmouseout =/""+this.name+".onLeaveSelect(event)/" style=/"margin:0px;/">");document.write("<input type=/"hidden/" name='"+this.name+"3' id=/""+this.id+"/" value=/"123456/" />");document.write("<ul style=/"margin:0px;padding:0px;/">");document.write("<li id=/"sltText"+this.name+"/" onClick=/""+this.name+".onClickBtn('sltOption"+this.name+"');/"></li>");

document.write("<li id=/"sltOption"+this.name+"/" οnmοuseleave=/""+this.name+".onClickOption('sltOption"+this.name+"')/" onClick=/""+this.name+".onClickOption('sltOption"+this.name+"')/">");document.write("<ul style=/"margin:0px;padding:0px;/">");

for(var i=0 ;i<this.dataArray.length;i++) { if(this.dataArray[i].isSelected) { document.getElementById("sltText"+this.name).innerHTML = this.subTextByteString(this.dataArray[i].innerHTML,(this.width)/8); document.getElementById("sltText"+this.name).title = this.dataArray[i].text; document.getElementById(this.id).value = this.dataArray[i].value; } document.write("<li onClick=/""+this.name+".onSelected(this)/" onMouseMove='"+this.name+".changeColor(this)' onMouseOut='"+this.name+".changeColorBack(this)' class='pCss"+this.name+"'"); document.write("value=/""+this.dataArray[i].value+"/" title=/""+this.dataArray[i].text+"/">"+this.dataArray[i].text+"</li>"); }

document.write("</ul>");document.write("</li>");document.write("</ul>");document.write("</div>"); }

function onSelectedSlt(obj){ //alert(obj.innerHTML); document.getElementById("sltText"+this.name).innerHTML=this.subTextByteString(obj.innerHTML,(this.width)/8); document.getElementById("sltText"+this.name).title=obj.innerHTML; document.getElementById(this.id).value = obj.value; //alert(obj.value);}

function onClickOption(obj){ //alert(obj); document.getElementById(obj).style.display="none"; this.isOpened =false;}

function hiddenOption(){ if (this.isOpened==true) document.getElementById('sltOption').style.display="block";}

function changeOptionColor(obj){ obj.style.backgroundColor="#e1e1e1";}

function changeOptionColorBack(obj){ obj.style.backgroundColor="";}

function onLeaveSelect(e){

if(this.isLeave(e)) { //alert(11); } else { document.getElementById("sltOption"+this.name).style.display="none"; this.isOpened =false; }}

function isLeaveSelect(e){ if(!this.isOpened) { return false; } var x,y; //这个地方需要兼容浏览器，以后再说，呵呵，这里只是测试IE

if (this.browser.isIE) { x = window.event.x; y = window.event.y; } if (this.browser.isNS) { x = e.pageX; y = e.pageY; } var left = 0; var top = 0; var right = 0; var bottom = 0; left = document.getElementById("sltOption"+this.name).offsetLeft; top = document.getElementById("sltOption"+this.name).offsetTop-2; right = document.getElementById("sltOption"+this.name).offsetLeft+document.getElementById("sltOption"+this.name).offsetWidth; bottom = document.getElementById("sltOption"+this.name).offsetTop+document.getElementById("sltOption"+this.name).offsetHeight;

if((x>left) &&(x<right)&&(y>top)&&(y<bottom)) { return true }

return false;}

function getTextByte(str){ tempstr=str.replace(/[/x00-/xff]/g, "a"); tempstr=tempstr.replace(/[/uff61-/uff9f]/g, "a");//半角片假文 tempstr=tempstr.replace(/[/u3041-/u309f]/g, "aa");//全角平假文 tempstr=tempstr.replace(/[/u30a0-/u30ff]/g, "aa");//全角片假文 tempstr=tempstr.replace(/[^/x61-/x61]/g, "aa"); return tempstr.length;}

专利

最新回复(0)