JS为Select下拉框添加输入功能
JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路非常新颖,也不知究竟有多少人须要select可输入文字的功能,以下是具体的实现代码:前端资源分享
- <div style="position:relative;">
- <span style="margin-left:100px;width:18px;overflow:hidden;">
- <select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
- <option value="天蓝蓝">天蓝蓝</option>
- <option value="草绿绿">草绿绿</option>
- <option value="水清清">水清清</option>
- </select></span><input name="box" style="width:100px;position:absolute;left:0px;">
在本例中,CSS实现input输入框的定位,JS实现将用户所选择的Select的值显示在input中。
JS为Select下拉框添加输入功能的更多相关文章
- js获取select下拉框的value值和text文本值
介绍一种取下拉框值以及绑定下拉框数据的方法 这里用到的jquery-ui-multiselect插件 1.前台html代码 <span class="ModuleFormFiel ...
- js获取select下拉框中的值
现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...
- 基于bootstrap selectpicker ,实现select下拉框模糊查询功能
1.html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bo ...
- jquery实现select下拉框可输入+联想关联option
下面代码摘自http://www.oschina.net/question/96791_12832 <script language="javascript" src=&qu ...
- JS操作select下拉框动态变动(创建/删除/获取)
1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...
- jquery 纯JS设置select下拉框,并默认选中第一个
//html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...
- js获取select下拉框选中的的值和判断checkbox是否选中状态
html: <select id="lib_select" name=""> <option value="1" ...
- js获取select下拉框选项的值
var onchange="getBatch(this.options[this.options.selectedIndex].value)"
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
随机推荐
- 开启g++ 编辑器 c++11特性
以前都是在windows下用vs和cvi写C和C++代码,最近练习Linux下的使用. 编译的时候使用C++11的新特性比如auto 和 iteration特性都报不支持,后来在知乎看到答案需要在编译 ...
- JS实现继承多态
//类对象构造模版,无new访问,类似静态访问 var Class = { create: function () { return function () { //initialize初始化 //a ...
- ARM的STRB和LDRB指令分析
一.SDRAM 1.存储结构 SDRAM的内部是一个存储阵列.阵列就如同表格一样,将数据“填”进去.在数据读写时和表格的检索原理一样,先指定一个行(Row),再指定一个列 (Column),我们就可以 ...
- ”ENV_IS_EMBEDDED“解惑以及相关的移植实验
一.概述( ENV_IS_EMBEDDED的目的) 经典资料 认识 ENV_IS_EMBEDDED只有在CFG_ENV_IS_IN_FLASH或者CFG_ENV_IS_IN_NAND定义了才有 ...
- 当xcode里点运行出现treating unicode character as whites
可能是由于粘贴网页上的代码的时候两行之间的回车引起的,两行之间重新输入回车就行......删掉重新写一遍就ok了 引入网页上的回车时 可能 网页对其格式做了处理,所以Xcode 不认识了
- java环境变量设置方法
1.安装JDK,安装过程中可以自定义安装目录等信息,例如我们选择安装目录为D:\java\jdk1.5.0_08: 2.安装完成后,右击“我的电脑”,点击“属性”: 3.选择“高 ...
- h.264宏块与子宏块类型
宏块类型mb_type 宏块类型表示的是宏块不同的分割和编码方式,在h.264的语法结构中,宏块类型在宏块层(macroblock_layer)中用mb_type表示(请参考h.264语法结构分析中的 ...
- 基于Qt的信号分析简单应用软件的设计
一.需求描述: 1.读取data.asc文件,分析其连续性: 2.绘制信号图像,并保存. 二.UI界面组成: 该应用的UI由以下几个控件组成: 3个PushButton:打开文件.图像保存.退出: 1 ...
- Delphi 调试WEBService程序(ISAPI或CGI) 把Web App Debugger executable转换成 ISAPI/NSAPI
1.新建一个web工程,请选中最下面一项:Web App Debugger executable,Coclass name我们设为demo1: 2.在弹出的WebModule2中右击,在弹出的Ac ...
- Linux学习笔记29——IPC状态命令
一 IPC IPC是进程间通讯,在前面,我们相继学习了进程间通讯机制有信号量,内存共享,消息队列.状态命令(ipcs)和删除命令(ipcrm)提供了一种检查和清理IPC机制的方法. 二 状态命令 1 ...