javascript 模拟selecct

最新推荐文章于 2021-02-22 13:12:30 发布

原创最新推荐文章于 2021-02-22 13:12:30 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #div #input #url #html

本文介绍了一种使用JavaScript和HTML来模拟Select控件的方法，通过创建自定义的UI元素实现美观且可定制的选择框，同时保持了原生Select的功能。

Javascript 模拟select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="zh-CN">

<head>

<title>用javascript美化Select</title>

select{width:200px;height:18px;}

</style>

</head>

<body>

<h1>用javascript simulate select</h1>

<div>

</div>

<div>

<label for="pwd">Password</label>

</div>

<div>

<label for="province">Country</label>

<option value="10">can American American American American American </option>

<option value="11">England</option>

<option value="12">China</option>

<option value="13">Norway</option>

</select>

</div>

</fieldset>

</form>

loadSelect(document.f.province);

</script>

<p>

</p>

</body>

</html>

javascript:

/************************************

* js模拟Select *

* Date:2007-11-15 *

************************************/

function lengthOfBytes(pStr)

{//计算字符串以字节为单位的长度。

//ASCII码大于256的占两个字节.

var rLen=0;

if(pStr==null)return rLen;

var index=pStr.indexOf(" ");

while(index>=0)

{

pStr=pStr.substr(0,index)+" "+pStr.substr(index+6);

index=pStr.indexOf(" ");

}

var aLen=pStr.length;

for(var i=0;i<aLen;i++)

{

var ch=pStr.charCodeAt(i);

ch=parseInt(ch);

if(ch>256)

{

rLen+=2;

}else rLen+=1;

}

return rLen;

}

var childCreate=false;

function Offset(e)

//取标签的绝对位置

{

var t = e.offsetTop;

var l = e.offsetLeft;

var w = e.offsetWidth;

var h = e.offsetHeight-2;

while(e=e.offsetParent)

{

t+=e.offsetTop;

l+=e.offsetLeft;

}

return {

top : t,

left : l,

width : w,

height : h

}

function loadSelect(obj){

//第一步：取得Select所在的位置

var offset=Offset(obj);

//第二步：将真的select隐藏

obj.style.display="none";

//第三步：虚拟一个div出来代替select

var iDiv = document.createElement("div");

iDiv.id="selectof" + obj.name;

iDiv.style.position = "absolute";

iDiv.style.width=offset.width + "px";

iDiv.style.overflow="hidden";

iDiv.style.height=offset.height+ "px";

iDiv.style.top=offset.top + "px";

iDiv.style.left=offset.left + "px";

iDiv.style.background="url(icon_select.gif) no-repeat top right";

iDiv.style.border="1px solid #3366ff";

iDiv.style.fontSize="12px";

iDiv.style.lineHeight=offset.height + "px";

iDiv.style.textIndent="4px";

document.body.appendChild(iDiv);

//第四步：将select中默认的选项显示出来

var tValue=obj.options[obj.selectedIndex].innerHTML;

iDiv.innerHTML=tValue;

//第五步：模拟鼠标点击

iDiv.onmouseover=function(){//鼠标移到

iDiv.style.background="url(icon_select_focus.gif) no-repeat top right";

}

iDiv.onmouseout=function(){//鼠标移走

iDiv.style.background="url(icon_select.gif) no-repeat top right";

}

iDiv.onclick=function(){//鼠标点击

if (document.getElementById("selectchild" + obj.name)){

//判断是否创建过div

if (childCreate){

//判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。

document.getElementById("selectchild" + obj.name).style.display="none";

childCreate=false;

}else{

document.getElementById("selectchild" + obj.name).style.display="";

childCreate=true;

}

}else{

//初始一个div放在上一个div下边，当options的替身。

var cDiv = document.createElement("div");

cDiv.id="selectchild" + obj.name;

cDiv.style.position = "absolute";

cDiv.style.height=obj.options.length *20 + "px";

cDiv.style.top=(offset.top+offset.height+2) + "px";

cDiv.style.left=offset.left + "px";

cDiv.style.background="#f7f7f7";

cDiv.style.border="1px solid silver";

var uUl = document.createElement("ul");

uUl.id="uUlchild" + obj.name;

uUl.style.listStyle="none";

uUl.style.margin="0";

uUl.style.padding="0";

uUl.style.fontSize="12px";

cDiv.appendChild(uUl);

document.body.appendChild(cDiv);

childCreate=true;

var maxlen=0;

for (var i=0;i<obj.options.length;i++){

//将原始的select标签中的options添加到li中

var lLi=document.createElement("li");

lLi.id=obj.options[i].value;

lLi.style.textIndent="4px";

lLi.style.height="20px";

lLi.style.lineHeight="20px";

lLi.innerHTML=obj.options[i].innerHTML;

uUl.appendChild(lLi);

var templen=lengthOfBytes(lLi.innerHTML);

if(templen>maxlen)

maxlen=templen;

}

maxlen=parseInt(maxlen*6.2);

if(maxlen<offset.width)

maxlen=offset.width;

cDiv.style.width=maxlen+"px";

var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");

for (var j=0;j<obj.options.length;j++){

//为li标签添加鼠标事件

liObj[j].onmouseover=function(){

this.style.background="gray";

this.style.color="white";

}

liObj[j].onmouseout=function(){

this.style.background="white";

this.style.color="black";

}

liObj[j].onclick=function(){

//做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。

obj.options.length=0;

obj.options[0]=new Option(this.innerHTML,this.id);

//同时我们把下拉的关闭掉。

document.getElementById("selectchild" + obj.name).style.display="none";

childCreate=false;

iDiv.innerHTML=this.innerHTML;

}