共计 2668 个字符,预计需要花费 7 分钟才能阅读完成。
有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择。那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢?
其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果。
下面是志文工作室在一个工作项目需求中实现的相关代码示例,在此列出仅供参考,欢迎指正。
<!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
正文完