JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路非常新颖,也不知究竟有多少人须要select可输入文字的功能,以下是具体的实现代码:前端资源分享

  1. <div style="position:relative;">
  2. <span style="margin-left:100px;width:18px;overflow:hidden;">
  3. <select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
  4. <option value="天蓝蓝">天蓝蓝</option>
  5. <option value="草绿绿">草绿绿</option>
  6. <option value="水清清">水清清</option>
  7. </select></span><input name="box" style="width:100px;position:absolute;left:0px;">

在本例中,CSS实现input输入框的定位,JS实现将用户所选择的Select的值显示在input中。

JS为Select下拉框添加输入功能的更多相关文章

  1. js获取select下拉框的value值和text文本值

    介绍一种取下拉框值以及绑定下拉框数据的方法    这里用到的jquery-ui-multiselect插件 1.前台html代码 <span class="ModuleFormFiel ...

  2. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

  3. 基于bootstrap selectpicker ,实现select下拉框模糊查询功能

    1.html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bo ...

  4. jquery实现select下拉框可输入+联想关联option

    下面代码摘自http://www.oschina.net/question/96791_12832 <script language="javascript" src=&qu ...

  5. JS操作select下拉框动态变动(创建/删除/获取)

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  6. jquery 纯JS设置select下拉框,并默认选中第一个

    //html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...

  7. js获取select下拉框选中的的值和判断checkbox是否选中状态

    html: <select id="lib_select"  name="">   <option   value="1" ...

  8. js获取select下拉框选项的值

    var onchange="getBatch(this.options[this.options.selectedIndex].value)"

  9. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

随机推荐

  1. 开启g++ 编辑器 c++11特性

    以前都是在windows下用vs和cvi写C和C++代码,最近练习Linux下的使用. 编译的时候使用C++11的新特性比如auto 和 iteration特性都报不支持,后来在知乎看到答案需要在编译 ...

  2. JS实现继承多态

    //类对象构造模版,无new访问,类似静态访问 var Class = { create: function () { return function () { //initialize初始化 //a ...

  3. ARM的STRB和LDRB指令分析

    一.SDRAM 1.存储结构 SDRAM的内部是一个存储阵列.阵列就如同表格一样,将数据“填”进去.在数据读写时和表格的检索原理一样,先指定一个行(Row),再指定一个列 (Column),我们就可以 ...

  4. ”ENV_IS_EMBEDDED“解惑以及相关的移植实验

    一.概述( ENV_IS_EMBEDDED的目的) 经典资料 认识     ENV_IS_EMBEDDED只有在CFG_ENV_IS_IN_FLASH或者CFG_ENV_IS_IN_NAND定义了才有 ...

  5. 当xcode里点运行出现treating unicode character as whites

    可能是由于粘贴网页上的代码的时候两行之间的回车引起的,两行之间重新输入回车就行......删掉重新写一遍就ok了 引入网页上的回车时  可能  网页对其格式做了处理,所以Xcode  不认识了

  6. java环境变量设置方法

    1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08:    2.安装完成后,右击“我的电脑”,点击“属性”:         3.选择“高 ...

  7. h.264宏块与子宏块类型

    宏块类型mb_type 宏块类型表示的是宏块不同的分割和编码方式,在h.264的语法结构中,宏块类型在宏块层(macroblock_layer)中用mb_type表示(请参考h.264语法结构分析中的 ...

  8. 基于Qt的信号分析简单应用软件的设计

    一.需求描述: 1.读取data.asc文件,分析其连续性: 2.绘制信号图像,并保存. 二.UI界面组成: 该应用的UI由以下几个控件组成: 3个PushButton:打开文件.图像保存.退出: 1 ...

  9. Delphi 调试WEBService程序(ISAPI或CGI) 把Web App Debugger executable转换成 ISAPI/NSAPI

      1.新建一个web工程,请选中最下面一项:Web App Debugger executable,Coclass name我们设为demo1: 2.在弹出的WebModule2中右击,在弹出的Ac ...

  10. Linux学习笔记29——IPC状态命令

    一 IPC IPC是进程间通讯,在前面,我们相继学习了进程间通讯机制有信号量,内存共享,消息队列.状态命令(ipcs)和删除命令(ipcrm)提供了一种检查和清理IPC机制的方法. 二 状态命令 1 ...