模拟select问题：如何实现点select以外的地方收起它？


<!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>无标题文档</title>
<script type="text/javascript" language="javascript">
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.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
iDiv.style.border="1px solid #D2D2D2";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
iDiv.style.cursor="pointer";
iDiv.style.color="#333333";
iDiv.style.textAlign="left";
document.body.appendChild(iDiv);
//第四步：将select中默认的选项显示出来
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//第五步：模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
iDiv.style.background="url(images/index_dot_selecton.gif) no-repeat right -6px";
iDiv.style.border="1px solid #333333";
}
iDiv.onmouseout=function(){//鼠标移走
iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
iDiv.style.border="1px solid #D2D2D2";
}
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.width=offset.width + "px";
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="#FFFFFF";
cDiv.style.border="1px solid #D2D2D2";
cDiv.style.color="#333333";
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;
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 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="#D2D2D2";
this.style.cursor="pointer";
this.style.color="#333333";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="#333333";
}
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;
}
}
}
}
}
</script>
</head><body>
<form id="form1" name="gotoselect" method="post" action="">
<select id="gotomenu" name="gotomenu">
<option value="1">项一</option>
<option value="2">项二</option>
<option value="3">项三</option>
<option value="4">项四</option>
<option value="5">项五</option>
</select>
</form>
<script language="javascript">loadSelect(document.gotoselect.gotomenu);</script>
</body>
</html>

解决方案 »

  1.   

    哎！  还是自己用DIV模拟吧！http://topic.csdn.net/u/20090310/10/c2bb39c4-79bd-4ae2-a6ff-091bed140edb.html
      

  2.   

    改了一下,看看是不是你想要的效果...
    <!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>无标题文档</title>
    <script type="text/javascript" language="javascript">
    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.height=offset.height + "px";
    iDiv.style.top=offset.top + "px";
    iDiv.style.left=offset.left + "px";
    iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #D2D2D2";
    iDiv.style.fontSize="12px";
    iDiv.style.lineHeight=offset.height + "px";
    iDiv.style.textIndent="4px";
    iDiv.style.cursor="pointer";
    iDiv.style.color="#333333";
    iDiv.style.textAlign="left";
    document.body.appendChild(iDiv);
    //第四步：将select中默认的选项显示出来
    var tValue=obj.options[obj.selectedIndex].innerHTML;
    iDiv.innerHTML=tValue;
    //第五步：模拟鼠标点击
    iDiv.onmouseover=function(){//鼠标移到
    iDiv.style.background="url(images/index_dot_selecton.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #333333";
    }
    iDiv.onmouseout=function(){//鼠标移走
    iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #D2D2D2";
    }
    function selectEvent(e){//鼠标点击
    e=e||window.event
    var objTemp=e.srcElement?e.srcElement:e.target
    //alert(objTemp.tagName)
    if (document.getElementById("selectchild" + obj.name)){
    //判断是否创建过div
    if(objTemp==iDiv)
    {
    if (childCreate){
    //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
    }else{
    document.getElementById("selectchild" + obj.name).style.display="";
    childCreate=true;
    }
    }
    else{
    if (childCreate){
    //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
    }else{}
    }
    }else{
    //初始一个div放在上一个div下边，当options的替身。
    var cDiv = document.createElement("div");
    cDiv.id="selectchild" + obj.name;
    cDiv.style.position = "absolute";
    cDiv.style.width=offset.width + "px";
    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="#FFFFFF";
    cDiv.style.border="1px solid #D2D2D2";
    cDiv.style.color="#333333";
    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;
    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 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="#D2D2D2";
    this.style.cursor="pointer";
    this.style.color="#333333";
    }
    liObj[j].onmouseout=function(){
    this.style.background="white";
    this.style.color="#333333";
    }
    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;
    }
    }
    }
    }
    document.onclick=function(e){
    e=e||window.event;
    selectEvent(e)
    }
    }
    </script>
    </head>
    <body>
    <form id="form1" name="gotoselect" method="post" action="">
    <select id="gotomenu" name="gotomenu">
    <option value="1">项一</option>
    <option value="2">项二</option>
    <option value="3">项三</option>
    <option value="4">项四</option>
    <option value="5">项五</option>
    </select>
    </form>
    <script language="javascript">loadSelect(document.gotoselect.gotomenu);</script>
    </body>
    </html>
      

  3.   

    不好意思,先那个有问题IE和FF都行了.
    <script type="text/javascript" language="javascript">
    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.height=offset.height + "px";
    iDiv.style.top=offset.top + "px";
    iDiv.style.left=offset.left + "px";
    iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #D2D2D2";
    iDiv.style.fontSize="12px";
    iDiv.style.lineHeight=offset.height + "px";
    iDiv.style.textIndent="4px";
    iDiv.style.cursor="pointer";
    iDiv.style.color="#333333";
    iDiv.style.textAlign="left";
    document.body.appendChild(iDiv);
    //第四步：将select中默认的选项显示出来
    var tValue=obj.options[obj.selectedIndex].innerHTML;
    iDiv.innerHTML=tValue;
    //第五步：模拟鼠标点击
    iDiv.onmouseover=function(){//鼠标移到
    iDiv.style.background="url(images/index_dot_selecton.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #333333";
    }
    iDiv.onmouseout=function(){//鼠标移走
    iDiv.style.background="url(images/index_dot_selectout.gif) no-repeat right -6px";
    iDiv.style.border="1px solid #D2D2D2";
    }
    document.onclick=function(e){//鼠标点击
    e=e||window.event
    var objTemp=e.srcElement?e.srcElement:e.target
    if(objTemp==iDiv)
    {
    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.width=offset.width + "px";
    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="#FFFFFF";
    cDiv.style.border="1px solid #D2D2D2";
    cDiv.style.color="#333333";
    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;
    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 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="#D2D2D2";
    this.style.cursor="pointer";
    this.style.color="#333333";
    }
    liObj[j].onmouseout=function(){
    this.style.background="white";
    this.style.color="#333333";
    }
    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;
    }
    }
    }
    }else{
    if (childCreate){
    //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
    }else{
    } 
    }
    }
    }
      

  4.   

    JQuery之类的框架是否有这个功能
      

  5.   

    感谢danica7773兄解决了我的问题。在IE，FF，Opera下都通过了测试。请接100分。