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. Object之魔术函数__call() 处理错误调用

    在提到__call之前,先来看一个实例的测试结果,以便更好地去了解__call方法的作用.上代码: <?php class Person{ function say(){ echo " ...

  2. [python]随机数

    import random()testlist = [1,3,4,5]a,b = 1,5random().random()() 生成0至1之间的随机浮点数,结果大于等于0.0,小于1.0random. ...

  3. golang中设置Host Header的小Tips

    前言 笔者最近时间一直在学习和写Ruby和Go,尤其是Go,作为云计算时代的标准语言,写起来还是相当有感觉的,难过其会越来越火. 不过写的过程中,也遇到了一些小问题,本文就是分享关于go语言设置 HT ...

  4. Katu Puzzle

    poj3678:http://poj.org/problem?id=3678 题意:给你一些数,然后这些要么是0要么是1,然后回给出一些数之间的and,or,xor的值,问你是否存在一组解. 题解:2 ...

  5. Count The Pairs

    hdu4750:http://acm.hdu.edu.cn/showproblem.php?pid=4750 题意:给你一个带权无向图,然后让你求这样的点对s,t,使得s--t的所有路径上的最大的边的 ...

  6. php调用linux命令

    php有以下接口可提供执行外部函数: system() exec() popen() 但要使用上面几个函数,首先,要配置php.ini配置文件.修改配置文件如下: safe_mode = off; 改 ...

  7. 14.8.1 Creating InnoDB Tables 创建InnoDB 表

    14.8.1 Creating InnoDB Tables 创建InnoDB 表 创建一个InnoDB表,使用CREATE TABLE 语句,你不需要指定ENGINE=InnoDB 子句 如果Inno ...

  8. [LeetCode#128]Word Ladder II

    Problem: Given two words (start and end), and a dictionary, find all shortest transformation sequenc ...

  9. (转载)linux中shell变量

    (转载)http://blog.csdn.net/zahuopuboss/article/details/8633891 为使shell编程更有效,系统提供了一些shell变量.shell变量可以保存 ...

  10. 网络流(费用流)CodeForces 321B:Ciel and Duel

    Fox Ciel is playing a card game with her friend Jiro. Jiro has n cards, each one has two attributes: ...