可输入且提示的select选择框

JasonChi

浏览: 91988 次
性别:
来自: 杭州

最近访客更多访客>>

cinic2003

renzhe1981

mr_jjq

stavenvanderbilt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
   <style>   
   .optionDiv    {    border:1px    solid    black;border-top:0px;position:absolute;visibility:hidden;}   
   .optionDiv    div    {    font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;cursor:default;width:100%;}   
</style>

<script type="text/javascript">  


   var    optionDiv    =    document.createElement("div");   
  function createselectelements(obj,arr){
  
   var    oWhere    =    document.body;   
   //设置下拉菜单选项的坐标和宽度   
   with(optionDiv.style)    {    
    var    xy    =    getSelectPosition(obj);   
    pixelLeft    =    xy[0];   
    pixelTop    =    xy[1]+obj.offsetHeight;   
    width    =    obj.offsetWidth;   
    optionDiv.className    =    "optionDiv";   
   }   
   //下拉菜单内容   
   var    val1=obj.value;
   var    optionsindexs=0;
   for(var i=optionDiv.childNodes.length;i>0;i--){
       optionDiv.removeChild(optionDiv.childNodes[i-1]);
   }
   var    Options    =    new    Array();   
   for    (var    i=0;i<arr.length;i++)    {     
    if(arr[i].indexOf(val1)==0){  
       Options[optionsindexs]    =    optionDiv.appendChild(document.createElement("div")); 
       Options[optionsindexs].innerText= arr[i];   
       optionsindexs++;
    }  
   }   
   //移动Option时的动态效果   
   for (i=0;i<Options.length;i++)    { 
   if (document.all)
   {
    Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});   
    Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});   
    Options[i].attachEvent("onmouseup",function(){selectedText(obj)});   
   }else
   {
   Options[i].addEventListener("mouseup",function(){selectedText(obj)},false); 
   Options[i].addEventListener("mouseout",function(){moveWithOptions("","")},false);
    Options[i].addEventListener("mouseover",function(){moveWithOptions("highlight","white")},false);   
	
       
      
   }
   
   }  
   oWhere.appendChild(optionDiv);   
  }
   optionDiv.onselectstart    =    function()    {return    false;}   
   
   function showOptions(obj,selected){
 var    arr =new Array();  
 for(var i=0;i<selected.options.length;i++){
 alert(selected.options[i].name);
   arr[i]=selected.options[i].value;
 }
     createselectelements(obj,arr);
  if(optionDiv.childNodes.length==0){
     optionDiv.style.visibility    =    "hidden";
  }else{
      optionDiv.style.visibility  = "visible"; 
     }
    }

   document.onclick    =    function()    {   
    optionDiv.style.visibility    =    "hidden";
   }  

   function    moveWithOptions(bg,color)    {   
    with(event.srcElement)    {   
     style.backgroundColor    =    bg;   
     style.color    =    color;   
    }   
   }   
   function    selectedText(obj)    {   
    with(event.srcElement)    {   

      obj.value    =    innerText; 
    }   
       optionDiv.style.visibility =  "hidden"; 
   }   
   /*通用函数*/   
   //获取对象坐标   
   function    getSelectPosition(obj)    {   
    var    objLeft    =    obj.offsetLeft;   
    var    objTop    =    obj.offsetTop;   
    var    objParent    =    obj.offsetParent;   
    while    (objParent.tagName    !=    "BODY")    {   
     objLeft    +=    objParent.offsetLeft;   
     objTop    +=    objParent.offsetTop;   
     objParent    =    objParent.offsetParent;   
     }   
    return([objLeft,objTop]);   
   }   
</script>
 </head>

 <body>
 


<select name="selectmenu" id="selectmenu" style="visibility:hidden"     onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<option value="">选择邮箱</option>
<option value="sina.com">www.sina.com</option>
<option value="sohu.com">www.sohu.com</option>
<option value="tom.com">tom.com</option>
<option value="126.com">126.com</option>
<option value="163.com">163.com</option>
<option value="yahoo.com.cn">yahoo.com.cn</option>
<option value="kingsoft.com">kingsoft.com</option>
</select>
<input name="dmtxt"  id ="dmtxt" type="text" value="" oninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">

<select name="selectmenu" id="selectmenu" style="visibility:hidden"     onChange="document.getElementById('dmtxt').value=this.options[this.selectedIndex].name" >
<option value="">选择邮箱</option>
<option value="sina.com">sina.com</option>
<option value="sohu.com">sohu.com</option>
<option value="tom.com">tom.com</option>
<option value="126.com">126.com</option>
<option value="163.com">163.com</option>
<option value="yahoo.com.cn">yahoo.com.cn</option>
<option value="kingsoft.com">kingsoft.com</option>
</select>
<input name="dmtxt"  id ="dmtxt" type="text" value="" oninput="showOptions(this,document.getElementById('selectmenu'));" onMouseOver="this.select();this.focus();" style="">
 <script>
 </script>
 </body>

</html>

分享到：

Can't connect to MySQL server on 'localh ... | 图解修改CentOS的环境变量（转）

2012-07-23 19:20
浏览 1264
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可输入且提示的select选择框

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可输入且提示的select选择框

评论

发表评论

相关推荐

div实现模态窗口（转）

html 文本编辑器

javascript之HTML（select option）详解

Firefox下操作html对象

当select中内容过多时，使用搜索

js字符串防范

多选操作

页面动态时间显示

斑马线

联动选择

动态添加删除行

最近访客更多访客>>