<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. getDimension,getDimensionPixelOffset和getDimensionPixelSize

    dimens.xml里写上三个变量: <dimen name="activity_vertical_margin1">16dp</dimen> <di ...

  2. [NOIp2016提高组]愤怒的小鸟

    题目大意: 平面直角坐标系的第一象限有n(n<=18)个点,你可以每次给出一个形如y=ax^2+bx的函数把经过这条函数的点消掉,问消掉所有的点至少要多少函数? 思路: 枚举每两个点对,可以唯一 ...

  3. Z-Stack协议栈网络号与信道号的设置

    1.网络号设置 默认是:-DZDAPP_CONFIG_PAN_ID=0xFFFF 代表的是随机选择一个网络号,并加入此网络,可以将0xffff改成4位数字,如图所示. 2.信道号的设置 这个地方在网络 ...

  4. java 多线程处理一个list的集合

    原文:http://blog.csdn.net/jenny8080/article/details/52100312 import java.util.ArrayList; import java.u ...

  5. Node.js中的express框架获取参数

    express获取参数有三种方法: req.query  适合 http://localhost:3000/form?num=8888 req.body   适合http://localhost:30 ...

  6. 深入浅出RxJava就这一篇就够了

    前言: 第一次接触RxJava是在前不久,一个新Android项目的启动,在评估时选择了RxJava.RxJava是一个基于事件订阅的异步执行的一个类库.听起来有点复杂,其实是要你使用过一次,就会大概 ...

  7. Controller和RestController的区别

    1. Controller, RestController的共同点 都是用来表示Spring某个类的是否可以接收HTTP请求 2.  Controller, RestController的不同点 @C ...

  8. [转]SSIS: By coding

    本文转自:http://www.codeproject.com/Articles/604197/SSIS-By-coding Introduction SSIS better known as “SQ ...

  9. iOS:多线程同步加锁的简单介绍

    多线程同步加锁主要方式有3种:NSLock(普通锁).NSCondition(状态锁).synchronized同步代码块 还有少用的NSRecursiveLock(递归锁).NSConditionL ...

  10. 初入android驱动开发之字符设备(一)

    大学毕业,初入公司,招进去的是android驱动开发工程师的岗位,那时候刚进去,首先学到的就是如何搭建kernel.android的编译环境,然后就是了解如何刷设备以及一些最基本的工具.如adb.fa ...