DIV模拟select

最新推荐文章于 2024-04-08 16:25:01 发布

lxs5i5j

最新推荐文章于 2024-04-08 16:25:01 发布

阅读量2.7k

点赞数

分类专栏：其它文章标签： div function browser javascript border html

其它专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

// JavaScript Document
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2007 by whb147（苦乐随缘）.

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

// 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;
}