<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>可以编辑的下拉列表框实现 - 分享JavaScript</title>

    <style type="text/css">

    .selectBoxArrow{

        margin-top:1px;

        float:left;

        position:absolute;

        right:1px;

    }

    .selectBoxInput{

        border:0px;

        padding-left:1px;

        height:16px;

        position:absolute;

        top:0px;

        left:0px;

    }

    .selectBox{

        border:1px solid #7f9db9;

        height:20px;    

    }

    .selectBoxOptionContainer{

        position:absolute;

        border:1px solid #7f9db9;

        height:100px;

        background-color:#FFF;

        left:-1px;

        top:20px;

        visibility:hidden;

        overflow:auto;

    }

    .selectBoxAnOption{

        font-family:arial;

        font-size:12px;

        cursor:default;

        margin:1px;

        overflow:hidden;

        white-space:nowrap;

    }

    .selectBoxIframe{

        position:absolute;

        background-color:#FFF;

        border:0px;

        z-index:999;

    }

    </style>

    <script type="text/javascript">

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

    Editable select

    Copyright (C) September 2005  DTHMLGoodies.com, Alf Magne Kalleland

    This library is free software; you can redistribute it and/or

    modify it under the terms of the GNU Lesser General Public

    License as published by the Free Software Foundation; either

    version 2.1 of the License, or (at your option) any later version.

    This library is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU

    Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public

    License along with this library; if not, write to the Free Software

    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

    Dhtmlgoodies.com., hereby disclaims all copyright interest in this script

    written by Alf Magne Kalleland.

    Alf Magne Kalleland, 2006

    Owner of DHTMLgoodies.com

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

    // Path to arrow images

    var arrowImage = 'images/select_arrow.gif';    // Regular arrow

    var arrowImageOver = 'images/select_arrow_over.gif';    // Mouse over

    var arrowImageDown = 'images/select_arrow_down.gif';    // Mouse down

    var selectBoxIds = 0;

    var currentlyOpenedOptionBox = false;

    var editableSelect_activeArrow = false;

    function selectBox_switchImageUrl()

    {

        if(this.src.indexOf(arrowImage)>=0){

            this.src = this.src.replace(arrowImage,arrowImageOver);

        }else{

            this.src = this.src.replace(arrowImageOver,arrowImage);

        }

    }

    function selectBox_showOptions()

    {

        if(editableSelect_activeArrow && editableSelect_activeArrow!=this){

            editableSelect_activeArrow.src = arrowImage;

        }

        editableSelect_activeArrow = this;

        var numId = this.id.replace(/[^\d]/g,'');

        var optionDiv = document.getElementById('selectBoxOptions' + numId);

        if(optionDiv.style.display=='block'){

            optionDiv.style.display='none';

            if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + numId).style.display='none';

            this.src = arrowImageOver;

        }else{

            optionDiv.style.display='block';

            if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + numId).style.display='block';

            this.src = arrowImageDown;

            if(currentlyOpenedOptionBox && currentlyOpenedOptionBox!=optionDiv)currentlyOpenedOptionBox.style.display='none';

            currentlyOpenedOptionBox= optionDiv;

        }

    }

    function selectOptionValue()

    {

        var parentNode = this.parentNode.parentNode;

        var textInput = parentNode.getElementsByTagName('INPUT')[0];

        textInput.value = this.innerHTML;

        this.parentNode.style.display='none';

        document.getElementById('arrowSelectBox' + parentNode.id.replace(/[^\d]/g,'')).src = arrowImageOver;

        if(navigator.userAgent.indexOf('MSIE')>=0)document.getElementById('selectBoxIframe' + parentNode.id.replace(/[^\d]/g,'')).style.display='none';

    }

    var activeOption;

    function highlightSelectBoxOption()

    {

        if(this.style.backgroundColor=='#316AC5'){

            this.style.backgroundColor='';

            this.style.color='';

        }else{

            this.style.backgroundColor='#316AC5';

            this.style.color='#FFF';

        }    

        if(activeOption){

            activeOption.style.backgroundColor='';

            activeOption.style.color='';

        }

        activeOption = this;

    }

    function createEditableSelect(dest)

    {

        dest.className='selectBoxInput';

        var div = document.createElement('DIV');

        div.style.styleFloat = 'left';

        div.style.width = dest.offsetWidth + 16 + 'px';

        div.style.position = 'relative';

        div.id = 'selectBox' + selectBoxIds;

        var parent = dest.parentNode;

        parent.insertBefore(div,dest);

        div.appendChild(dest);

        div.className='selectBox';

        div.style.zIndex = 10000 - selectBoxIds;

        var img = document.createElement('IMG');

        img.src = arrowImage;

        img.className = 'selectBoxArrow';

        img.onmouseover = selectBox_switchImageUrl;

        img.onmouseout = selectBox_switchImageUrl;

        img.onclick = selectBox_showOptions;

        img.id = 'arrowSelectBox' + selectBoxIds;

        div.appendChild(img);

        var optionDiv = document.createElement('DIV');

        optionDiv.id = 'selectBoxOptions' + selectBoxIds;

        optionDiv.className='selectBoxOptionContainer';

        optionDiv.style.width = div.offsetWidth-2 + 'px';

        div.appendChild(optionDiv);

        if(navigator.userAgent.indexOf('MSIE')>=0){

            var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');

            iframe.style.width = optionDiv.style.width;

            iframe.style.height = optionDiv.offsetHeight + 'px';

            iframe.style.display='none';

            iframe.id = 'selectBoxIframe' + selectBoxIds;

            div.appendChild(iframe);

        }

        if(dest.getAttribute('selectBoxOptions')){

            var options = dest.getAttribute('selectBoxOptions').split(';');

            var optionsTotalHeight = 0;

            var optionArray = new Array();

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

                var anOption = document.createElement('DIV');

                anOption.innerHTML = options[no];

                anOption.className='selectBoxAnOption';

                anOption.onclick = selectOptionValue;

                anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';

                anOption.onmouseover = highlightSelectBoxOption;

                optionDiv.appendChild(anOption);

                optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;

                optionArray.push(anOption);

            }

            if(optionsTotalHeight > optionDiv.offsetHeight){

                for(var no=0;no<optionArray.length;no++){

                    optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';

                }

            }

            optionDiv.style.display='none';

            optionDiv.style.visibility='visible';

        }

        selectBoxIds = selectBoxIds + 1;

    }    

    </script>

</head>

<body>

<form>

<table border="0">

    <tr>

        <td>Where do you come from?</td>

        <td><input type="text" name="myText" value="Norway" selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico;Norway;Sweden;United Kingdom;United States"></td>

    </tr>

    <tr>

        <td>What is your name?</td>

        <td><input type="text" name="myText2" value="" selectBoxOptions="Amy;Andrew;Carol;Jennifer;Jim;Tim;Tommy;Vince"></td>

    </tr>

</table>

<p>I.e.: A combination of text- and selectbox. You can type in a value or choose from the list</p>

</form>

<script type="text/javascript">

createEditableSelect(document.forms[0].myText);

createEditableSelect(document.forms[0].myText2);

</script>

</body>

</html>

js+CSS 实现可以编辑的下拉列表框的更多相关文章

  1. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  2. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  3. 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  4. 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  5. 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示(转)

      我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用ecl ...

  6. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  7. Web网站配置Gzip，压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  8. 使用Maven + Jetty时,如何不锁定js css 静态资源

    Jetty会使用内存映射文件来缓存静态文件,包括js,css文件. 在Windows下,使用内存映射文件会导致文件被锁定,所以当Jetty启动的时候无法在编辑器对js或者css文件进行编辑. 解决办法 ...

  9. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

随机推荐

  1. 忘记原来的myql的root的密码；

    修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...

  2. 使用eclipse远程调试weblogic

    配置weblogic远程调试之前,需要做这几个工作:      1) 安装weblogic服务器,然后创建一个域:     2) 安装eclipse集成IDE:     3) eclipse中包含发布 ...

  3. NHibernate 存储过程 第十四篇

    NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...

  4. html在线美化网站

    Html在线美化压缩/转js - 在线工具 地址:http://tool.lu/html/ 1.美化效果: 2.转化字符串拼接

  5. UITabBarController 和 UINavigationController 的详解

    首先得搞清这两个控制器之间的层级关系,我们直接看官网给的图,如下所示: 从这张图可以看到:最右边的Assembled views是呈现给用户的界面,它左边的Window是最底层的窗口,重点来了,再往左 ...

  6. java中copy 一个list集合的方法

    java将一个list里的数据转移到另外一个list,可以使用for语句,一次使用add方法,示例如下: ArrayList list1=new ArrayList(); list1.add(&quo ...

  7. minishift的本地代码构建

    看文档说支持,但实际尝试了下,失败 发现仍然是找github中的代码 找了半天,发现是在目录下有.git的隐含目录,然后copy到其他目录下删除,然后再试,发现仍然失败. 日志看是指定的目录并没有传入 ...

  8. Ping Pod不通问题定位及Ingress验证

    Ping Pod网络问题不通定位记录 1.验证墙是否通 flannel默认使用8285端口作为UDP封装报文的端口,VxLan使用8472端口,下面命令验证一下确定其在8472端口 ip -d lin ...

  9. Android双系统实现

    1. 前言: 刷机,似乎是安卓手机用户的一项专利,可是,会刷机的用户一般都是喜新厌旧的角色. 一个系统用久了.就想换到还有一个系统.或者认为没有原来的好,或者又认为要换回去.这样又要重刷. 可是刷来刷 ...

  10. linux之fork()函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...