注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

可编辑下拉框  

2008-11-24 11:23:56|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

lbccheng可编辑下拉框

**

 *可编辑下拉框对象类

 *

 *可编辑下拉框,其实就是在下拉框的上面放了个无边框的输入框,在输入框输数据时,下拉框自动定位,

 *下拉框选中某项时,下拉框的值赋给输入框,从而产生错觉

 *

 *@author zxub 2005-8-22

 */

function combox(_inpuObjName,_controlSelectName)

{

    //生成的输入框对象名称

    this.inpuObjName=_inpuObjName;

 //生成的输入框对象

 this.inputbox=null;

    //原来的下拉框对象

    this.controlSelect=document.getElementById(_controlSelectName);

 

    //初始化对象

 //_comboxObj:combox对象,须指向自己

    this.init=function(_comboxObj)

    {

  this.inputbox=document.createElement("input");

  this.inputbox.id=this.inpuObjName;

  this.inputbox.comboxObj=_comboxObj;

  this.inputbox.onchange=function()

  {

   this.comboxObj.find();

  }

  with(this.inputbox.style)

  {

   width=this.controlSelect.offsetWidth-16;

   height=this.controlSelect.offsetHeight;

  }  

  this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox);

        _span=document.createElement("span");

        _span.style.width=18;

        this.controlSelect.insertAdjacentElement("beforeBegin",_span);

        _span.appendChild(this.controlSelect);

        _container=document.createElement("span");

        this.inputbox.insertAdjacentElement("beforeBegin",_container);

        _container.appendChild(this.inputbox);

        _container.appendChild(_span);

        _container.style.width=this.inputbox.offsetWidth+18;

        _width=this.controlSelect.offsetWidth-18;

        with (this.controlSelect.style)

        {

            margin="0 0 0 -"+_width;

        }

  this.controlSelect.comboxObj=_comboxObj;

        this.controlSelect.onchange=function()

  {

   this.comboxObj.change();   

  }

        this.change();

    }

    //当搜索到输入框的值时,下拉框自动定位/

    this.find=function()

    {

        with (this.controlSelect)

        {

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

                if(options[i].text.indexOf(this.inputbox.value)==0)

                {

                    selectedIndex=i;

                    this.change();

                    break;

                }

        }

    }

    //定义下拉框的onchange事件

    this.change=function()

    {       

        this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text;

        with (this.inputbox)

        {

            select();

            focus();

        }

    }

}

/**

 * 定位函数,获取控件绝对坐标

 */

function getLeftPos(e)

{

    var left=e.offsetLeft;

    while (e=e.offsetParent)

    {

        left+=e.offsetLeft;

    }

    return left;

}

function getTopPos(e)

{

    var top=e.offsetTop;

    while (e=e.offsetParent)

    {

        top+=e.offsetTop;

    }

    return top;

}  

  附上测试页面test.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript" src="combox.js"></script>

</HEAD>

<BODY>

<table border="1" style="border-collapse:collapse ">

  <tr>

    <td width="300"><select name=test1>

      <option value="可编辑下拉框1" selected>可编辑下拉框1</option>

      <option value="1">1</option>

      <option value="2">2</option>

      <option value="3">3</option>

    </select>

 <INPUT TYPE="button" value="获取编辑框1的值" onclick="alert(document.getElementById('username').value)">

 </td>

    <td width="109"><select name=test2>

      <option value="可编辑下拉框2">可编辑下拉框25555555</option>

      <option value="1">4</option>

      <option value="2" selected>5</option>

      <option value="3">6</option>

    </select> 

 </td>

    <td width="343">

  <INPUT TYPE="button" value="获取编辑框2的值" onclick="alert(document.getElementById('password').value)">

 </td>

  </tr>

</table>

<script language="javascript">

 var a=new combox("username","test1");

 //参数1为新生成输入框的名称

 //参数2为原来的select对象名称

 a.init(a);

 var b=new combox("password","test2");

 b.init(b);

</script>

</BODY>

</HTML>

  评论这张
 
阅读(952)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016