<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. Problem A: 指针：调用自定义交换函数，完成三个数整从小到大排列

    #include<stdio.h> int swap(int *p1,int *p2) { int flag; if(*p1>*p2) { flag=*p1; *p1=*p2; *p ...

  2. Problem D: 判断上否上三角矩阵

    #include<stdio.h> int main() { ][],i,j; while(scanf("%d",&n)!=EOF) { ; //flag用来做 ...

  3. Don't know how to define struct flock on this system, set --enable-opcach=no

    解决方法一: 最后查看php官方文档解决. 在configure 里面加上   --with-libdir=lib64 解决方法二: 编辑/etc/ld.so.conf 根据系统,加入include ...

  4. meteor学习-- #一 安装meteor快速使用

    下载安装 curl https://install.meteor.com/ | sh meteor会自动下载mongodb和其他需要依赖的库,不需要手动安装. 如果是Windows 的用户,请使用 m ...

  5. c#中的??运算符

    注意啦,c#中的??运算符是和?:运算符是不同的,这两者是有区别的. ??运算符称为null合并运算符,用于定义null值的类型和引用类型的默认值. 只当运算符的左操作数不为 null,此运算符将返回 ...

  6. 《Windows驱动开发技术详解》之StartIO例程

    内容中包含 base64string 图片造成字符过多,拒绝显示

  7. iOS:2015年07月最新苹果IOS上架App Store商店步骤

    苹果官方在2015年05-06月开发者中心进行了改版,网上的APP Store上架大部分都不一样了,自己研究总结一下,一个最新的上架教程以备后用. 原文地址:http://www.16css.com/ ...

  8. vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除

    一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...

  9. LeetCode OJ Minimum Depth of Binary Tree 递归求解

        题目URL:https://leetcode.com/problems/minimum-depth-of-binary-tree/ 111. Minimum Depth of Binary T ...

  10. 【转】dependency injection 的例子

    Dependency Injection in PHP. Create your own DI container. / blog / PHP By my opinion one of the big ...