JS为Select下拉框添加输入功能

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中。

时间： 2024-08-08 13:49:47

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

JS为Select下拉框增加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路很新颖,也不知到底有多少人需要select可输入文字的功能,下面是详细的实现代码:前端资源分享 .代码   <div style="position:relative;">

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

JS获取select下拉框选中的value或者其name

举例: <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hid"> $("#hid option:checked").text()      //这是获取下拉框显示出来的值 [hid为select标签的id] $("#hid option:checked"

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

1.html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bootstrap.min.js bootstrap-select.min.js <select class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search=&q

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

下面代码摘自http://www.oschina.net/question/96791_12832 <script language="javascript" src="jquery-1.4.1.js"></script><script> $(document).ready(function() {    var cus = 0;    var classname = "";    var arry = new

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

1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option function addOption(){ //根据id查找对象, var obj=document.getElementByIdx_x

JS/JQuery操作select下拉框

一.js 操作select 下拉框 var selObj = 下拉框对象 1. 移除所有项:selObj.options.length = 0; 2. 移除下拉框中的一项:selObj.options.remove(index); “index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进 也可利用循环,移除所有项: var length = selObj.options.length; for(var i=length-1;i>=0;i-

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

第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结构来模拟真正的select的操作. 用来模拟select框的div结构如下: <div class="selectbox">//包裹整个模拟框的盒子 <div class="currentselected"></div>//用于当前默

JavaScript向select下拉框中添加和删除元素

JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm