<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. 邮件发送javamail

    写在前面: 最近要将dms系统原始发邮件的功能(调用的webservice)改变成使用smtp服务来发送邮件(使用javamail来发送),这里简单记录下,方便日后有用到,直接拿来用即可. 首先导入需 ...

  2. ob_flush()和flush()和ob_implicit_flush(true)

    http://www.jb51.net/article/16215.htm 第一: “ob_flush()和flush()的区别.前者是把数据从PHP的缓冲中释放出来,后者是把不在缓冲中的或者说是被释 ...

  3. 一种计算MD5的实现方法

    1.在需要用到加密的地方可以使用.net中的md5相关的类生成md5给文件加密. 2.基本思路: 将文件也好,字符串也好,转成字节数组,再利用.net的md5相关类生成md5相关字符串,再将字符串转成 ...

  4. Web API使用记录系列（四）OAuth授权与身份校验

    呼,开干第四篇,基于OWIN搭建OAuth认证授权服务器与接口身份校验. OAuth包含授权码模式.密码模式.客户端模式和简化模式,这里我们文章记录的是密码模式和客户端模式. 目录 引用安装 授权处理 ...

  5. Promise小结

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  6. Lua学习笔记之开始

    在这节课的开始,按照国际惯例,一般学习一门新的语言,都是要打印出“Hello,world”,那么我们也不例外. Lua语言的打印跟其他语言一样,只要print(“Hello,World”),然后保存为 ...

  7. 配置Node Manager启动同一机器的两个域

    进入/u01/FMW_Home/weblogic/wlserver_10.3/server/bin目录,在需要配置的节点上启动node manager,以weblogic用户登录 c d /u01/F ...

  8. 二十四种设计模式：模板方法模式(Template Method Pattern)

    模板方法模式(Template Method Pattern) 介绍定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.Template Method使得子类可以不改变一个算法的结构即可重定义该算法 ...

  9. Java数据库编程——事务

    我们可以将一组语句构建成一个事务(transaction).当所有语句都顺利执行之后,事务可以提交(commit).否则,如果其中某个语句遇到错误,那么事务将被回滚,就好像没有任何语句被执行过一样. ...

  10. Delphi 对象模型学习笔记（转）

    摘要     Borland Object Pascal 对象模型(现在已经正是命名为 Delphi 语言)与其他 OOP 语言一样,都提供了一些基础服务: 如对象创建服务.对象释放服务.对象识别服务 ...