可选择可编辑输入的下拉框功能模拟的实现

2013-08-06 3 条评论 11,300 次阅读 被赞了 2 次
本文发布于：2013-08-06，最后更新于：2013-08-07，如果内容失效请留言告知。

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

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

下面是志文工作室在一个工作项目需求中实现的相关代码示例，在此列出仅供参考，欢迎指正。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
  <title>可编辑可选择的下拉框|志文工作室-lzw.me</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>

效果查看：http://lzw.me/pages/demo/input_and_select_effect.html

http://lzw.me/pages/demo/input_and_select_effect.html

相关文章:

Default ThumbnailJsduck:前端文档生成利器Jsduck介绍及安装使用 Default ThumbnailWeb前端开发规范参考 Default Thumbnailbootstrap前端开发框架简介 Default Thumbnailgrunt 快速入门：使用 grunt 自动化构建工具进行前端开发 Default ThumbnailWeb 前端开发的包管理工具 bower 快速入门 Default Thumbnail前端自动化测试工具：SlimerJS、phantomJS 和 CasperJS Default ThumbnailWindows 上安装 Jekyll Default Thumbnailfis3 工程化工具应用实践经验 Default Thumbnail使用 yarn 代替 npm 管理前端项目模块依赖 Default Thumbnailhtml 标签 iframe 基础与应用实践 Default ThumbnailJavaScript 中的异步编程方式与实践 Default Thumbnail让 iframe 页面强制刷新的方法
点赞 (2)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. Coder说道：
    2013年09月14日 12:58 上午
    TheWorld Browser TheWorld Browser Windows 7 Windows 7

    不错，学习学习

    回复
  2. 萝卜头头说道：
    2013年08月6日 8:41 下午
    Google Chrome 28.0.1500.95 Google Chrome 28.0.1500.95 Windows XP Windows XP

    这个很使用，我在很多地方看到过这种效果，但具体代码第一次看到哦

    回复
    1. 任侠说道：
      2013年08月7日 10:51 上午
      Google Chrome 28.0.1500.95 Google Chrome 28.0.1500.95 Windows 7 x64 Edition Windows 7 x64 Edition

      是很常用吧~ :razz:
      应该大都是利用这样的模拟效果，有的甚至是用div+css及js 来伪装的~

      回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code