A veces necesitamos un cuadro desplegable opcional para seleccionar contenido, pero también existe la necesidad de personalizar la entrada. Para este requisito, la mayoría de los sitios web usan un cuadro desplegable y un texto de entrada, y dan selecciones en paralelo o rama. Entonces, queremos que parezca un cuadro desplegable que se puede ingresar o seleccionar, entonces, ¿cómo lo hacemos?
De hecho, podemos simular este efecto a través del posicionamiento de CSS y un pequeño código JavaScript.
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> cuadro desplegable editable y seleccionable </title>
<meta charset = "utf-8">
<estilo>
.list-name-entrada {
Color: #333;
Font-Family: Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
tamaño de fuente: 15px;
Font-Weight: Bold;
Altura: 50px;
margen: 0px;
relleno: 0px;
Posición: relativo;
Ancho: 530px;
}
.list-name-para-selecto {
borde: 0;
Color: #555;
Altura: 20px;
color de iluminación: RGB (255, 255, 255);
Línea de altura: 20px;
margen: 0 0 10px 0;
Color de esquema: #555;
Outline-ofset: 0px;
estilo de esquema: ninguno;
ancho de esquema: 0px;
relleno: 4px 6px;
Posición: Absoluto;
arriba: 1px;
Izquierda: 3px;
Align vertical: medio;
Ancho: 486px;
}
.List-Name-Input-For-Select: Focus {
borde: 0;
Border-Radius: 0;
}
.list-select {
Color de fondo: #fff;
borde: 1px #ccc sólido;
Border-Radius: 4px;
Color: #555;
cursor: puntero;
Altura: 30px;
Izquierda: 0px;
margen: 0 0 10px 0;
relleno: 4px 6px;
Posición: Absoluto;
arriba: 0px;
Align vertical: medio;
espacio blanco: pre;
Ancho: 530px;
}
</style>
</ablo>
<Body>
<div id = "List-Name-Input">
<select type = "text" id = "list-select">
<opción valor = "">
Nuevo
</opción>
<opción valor = "0">
10-ngcfg-update-1000
</opción>
<opción valor = "1">
11-ngcfg-update-1000
</opción>
<opción valor = "2">
111
</opción>
<opción valor = "3">
12-ngcfg-update-1000
</opción>
<opción valor = "4">
13-ngcfg-update-1000
</opción>
<opción valor = "5">
14-NGCFG-UPDATE-1000
</opción>
<opción valor = "6">
15-ngcfg-update-1000
</opción>
<opción valor = "7">
16-ngcfg-update-1000
</opción>
<opción valor = "8">
17-ngcfg-update-1000
</opción>
<opción valor = "9">
18-NGCFG-UPDATE-1257
</opción>
<opción valor = "10">
2-NGCFG-UPDATE-100
</opción>
<opción valor = "11">
3-NGCFG-UPDATE-150
</opción>
<opción valor = "12">
4-NGCFG-UPDATE-200
</opción>
<opción valor = "13">
5-NGCG-UPDATE 20050
</opción>
<opción valor = "14">
6-NGCFG-UPDATE-418
</opción>
<opción valor = "15">
7-NGCFG-UPDATE-500
</opción>
<opción valor = "16">
8-ngcfg-update-1000
</opción>
<opción valor = "17">
9-ngcfg-update-1000
</opción>
<opción valor = "18">
@TODO
</opción>
<opción valor = "19">
@CNC-BJ-4
</opción>
<opción valor = "20">
CNC-BJ-prueba
</opción>
<opción valor = "21">
prueba
</opción>
</select>
<input type = "text" id = "list-name-for-select">
</div>
<script>
var listName = document.getElementById ('list-name-for-select');
var listelect = document.getElementById ('list-select'). onchange = function (e) {
console.log (esto)
if (this.Value) {
listName.Value = this.Value + '| ' + this.options [this.selectedIndex] .Text;
}demás{
listName.Value = ''
}
};
</script>
</body>
</html>