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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
浅谈js中的闭包
Mar 16 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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写的serv-u的web申请账号的程序
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php数组去重实例及分析
2013/11/26 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JS 常用校验函数
2009/03/26 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python在非root权限下的安装方法
2018/01/23 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
游戏商店:Eneba
2020/04/25 全球购物
安全教育月活动总结
2014/05/05 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
比赛口号大全
2014/06/10 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
企业安全生产规章制度
2015/08/06 职场文书
python基础详解之if循环语句
2021/04/24 Python