javascript实现的一个带下拉框功能的文本框


Posted in Javascript onMay 08, 2014

有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择。那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢?

其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果。

<!DOCTYPE html>
<html>
<head>
 <title>可编辑可选择的下拉框</title>
 <meta charset="utf-8">
 <style>
  .list-name-input{
   color: #333;
   font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
   font-size: 15px;
   font-weight: bold;
   height: 50px;
   margin: 0px;
   padding: 0px;
   position: relative;
   width: 530px;
  }
  .list-name-for-select{
   border: 0;
   color: #555;
   height: 20px;
   lighting-color: rgb(255, 255, 255);
   line-height: 20px;
   margin:0 0 10px 0;
   outline-color: #555;
   outline-offset: 0px;
   outline-style: none;
   outline-width: 0px;
   padding: 4px 6px;
   position: absolute;
   top: 1px;
   left: 3px;
   vertical-align: middle;
   width: 486px;
  }
  .list-name-input-for-select:focus{
   border: 0;
   border-radius: 0;
  }
  .list-select{
   background-color: #FFF;
   border:1px #ccc solid;
   border-radius: 4px;
   color: #555;
   cursor: pointer;
   height: 30px;
   left: 0px;
   margin:0 0 10px 0;
   padding: 4px 6px;
   position: absolute;
   top: 0px;
   vertical-align: middle;
   white-space: pre;
   width: 530px;
  }
 </style>
</head>
<body>
 <div id="list-name-input" class="list-name-input">
     <select type="text" class="list-select" id="list-select">
         <option value="">
             新建
         </option>
         <option value="0">
             10-NGCFG-update-1000
         </option>
         <option value="1">
             11-NGCFG-update-1000
         </option>
         <option value="2">
             111
         </option>
         <option value="3">
             12-NGCFG-update-1000
         </option>
         <option value="4">
             13-NGCFG-update-1000
         </option>
         <option value="5">
             14-NGCFG-update-1000
         </option>
         <option value="6">
             15-NGCFG-update-1000
         </option>
         <option value="7">
             16-NGCFG-update-1000
         </option>
         <option value="8">
             17-NGCFG-update-1000
         </option>
         <option value="9">
             18-NGCFG-update-1257
         </option>
         <option value="10">
             2-NGCFG-update-100
         </option>
         <option value="11">
             3-NGCFG-update-150
         </option>
         <option value="12">
             4-NGCFG-update-200
         </option>
         <option value="13">
             5-NGCG-update-250
         </option>
         <option value="14">
             6-NGCFG-update-418
         </option>
         <option value="15">
             7-NGCFG-update-500
         </option>
         <option value="16">
             8-NGCFG-update-1000
         </option>
         <option value="17">
             9-NGCFG-update-1000
         </option>
         <option value="18">
             @ALL
         </option>
         <option value="19">
             @CNC-BJ-4
         </option>
         <option value="20">
             CNC-BJ--测试
         </option>
         <option value="21">
             test
         </option>
     </select>
     <input type="text" class="name item-width list-name-for-select" id="list-name-for-select">
 </div>
 <script>
  var listName = document.getElementById('list-name-for-select');
  var listSelect = document.getElementById('list-select').onchange = function(e){
   console.log(this)
   if(this.value){
    listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;
   }else{
    listName.value = ''
   }
  };
 </script>
</body>
</html>
Javascript 相关文章推荐
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
javascript解析json数据的3种方式
May 08 #Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 #Javascript
JS获取随机数函数可自定义最小值最大值
May 08 #Javascript
js数组操作常用方法
May 08 #Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 #Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 #Javascript
javascript操作excel生成报表示例
May 08 #Javascript
You might like
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Django学习之文件上传与下载
2019/10/06 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
三年级数学教学反思
2014/01/31 职场文书
个人作风剖析材料
2014/02/02 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
学习雷锋倡议书
2014/04/15 职场文书
工作收入证明模板
2014/10/10 职场文书
开票证明
2015/06/23 职场文书
清洁工工作总结
2015/08/11 职场文书