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静态的动态
Sep 18 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
详解javascript void(0)
Jul 13 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
写一个Vue loading 插件
Nov 09 Javascript
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
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
应届大学生求职信
2013/12/01 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js