<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. （原创）Stanford Machine Learning (by Andrew NG) --- (week 6) Advice for Applying Machine Learning & Machine Learning System Design

    (1) Advice for applying machine learning Deciding what to try next 现在我们已学习了线性回归.逻辑回归.神经网络等机器学习算法,接下来 ...

  2. Train Problem I（模拟栈）

    题意:模拟栈,试问使用2个栈,能否使得串1变为串2 思路:模拟,经典问题,注意只要相同的元素放到栈顶后就不会再移动了,只需要考虑剩下的元素,因此每次只考虑一个元素的进入方式. #include< ...

  3. Linux下KVM的图形界面管理工具（WebVirtMgr）（Web版）

    WebVirtMgr面板 截图 介绍 WebVirtMgr是一个基于libvirt的Web界面,用于管理虚拟机.它允许您创建和配置新域,并调整域的资源分配.VNC查看器为来宾域提供完整的图形控制台.K ...

  4. 简单实现ToolStripMenuItem（菜单栏）的单选效果

    来源:http://www.97world.com/archives/2194 这几天在写又拍云的客户端,老实说确实学到了不少东西!接下来的几天我会把一些技巧或者原来没有接触过的一些东西发上来,算是复 ...

  5. String.format("%0"+length+"d", arr)中的%0和"d"分别代表什么

    public static void main(String[] args) { int a = 8; String s = String.format("%04d", a); S ...

  6. 【docker】解决docker pull镜像 拉取镜像龟速的问题,docker拉取镜像使用阿里云docker镜像加速器

    在docker拉取mysql镜像过程中,出现龟速的问题,解决这个问题的方法: 这个页面 停留了好久好久,依旧没有下载完成. 碰上这种情况 1.先退出Ctrl+C 2.在浏览器上进入阿里云docker库 ...

  7. C/C++控制台输出时设置字体及背景颜色

    1.改变整个控制台的颜色用 system("color 0A"); 其中color后面的0是背景色代号,A是前景色代号.各颜色代码如下: 0=黑色 1=蓝色 2=绿色 3=湖蓝色  ...

  8. Openshift部署Zookeeper和Kafka

    部署Zookeeper github网址 https://github.com/ericnie2015/zookeeper-k8s-openshift 1.在openshift目录中,首先构建imag ...

  9. jquery元素节点操作

    jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...

  10. Oracle imp关于fromuser 和 touser的用法

    fromuser就是把当前的dmp文件中的某一个用户下的数据取出.touser就是把现在dmp文件中的数据导入到目标库的指定user下.具体命令这样.exp userid=system/manager ...