Às vezes, precisamos de uma caixa suspensa opcional para selecionar conteúdo, mas também há a necessidade de personalizar a entrada. Para esse requisito, a maioria dos sites usa uma caixa suspensa e um texto de entrada e fornece seleções em paralelo ou ramificação. Então, queremos que pareça uma caixa suspensa que possa ser inserida ou selecionada, então como fazemos isso?
De fato, podemos simular esse efeito através do posicionamento CSS e um pequeno código JavaScript.
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<title> Caixa suspensa editável e selecionável </title>
<meta charset = "utf-8">
<estilo>
.list-name-entus {
Cor: #333;
Fonte-família: Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
Size da fonte: 15px;
Peso da fonte: negrito;
Altura: 50px;
margem: 0px;
preenchimento: 0px;
Posição: relativa;
Largura: 530px;
}
.List-name-for-Select {
borda: 0;
Cor: #555;
Altura: 20px;
cor de iluminação: RGB (255, 255, 255);
altura de linha: 20px;
margem: 0 0 10px 0;
contorno-cor: #555;
Offset de esboço: 0px;
estilo de esboço: nenhum;
Linha de esboço: 0px;
preenchimento: 4px 6px;
Posição: Absoluto;
topo: 1px;
Esquerda: 3px;
Alinhamento vertical: meio;
Largura: 486px;
}
.List-name-input-for-Select: focus {
borda: 0;
Radio de fronteira: 0;
}
.List-Select {
Background-Color: #FFF;
Border: 1px #ccc sólido;
Radio de fronteira: 4px;
Cor: #555;
Cursor: Ponteiro;
Altura: 30px;
Esquerda: 0px;
margem: 0 0 10px 0;
preenchimento: 4px 6px;
Posição: Absoluto;
Top: 0px;
Alinhamento vertical: meio;
Espaço branco: pré;
Largura: 530px;
}
</style>
</head>
<Body>
<div id = "list-name-input">
<select type = "text" id = "list-select">
<opção value = "">
Novo
</pption>
<opção value = "0">
10-NGCFG-UPDATE-1000
</pption>
<opção value = "1">
11-NGCFG-UPDATE-1000
</pption>
<opção value = "2">
111
</pption>
<opção value = "3">
12-NGCFG-UPDATE-1000
</pption>
<opção value = "4">
13-NGCFG-UPDATE-1000
</pption>
<opção value = "5">
14-NGCFG-UPDATE-1000
</pption>
<opção value = "6">
15-NGCFG-UPDATE-1000
</pption>
<opção value = "7">
16-NGCFG-UPDATE-1000
</pption>
<opção value = "8">
17-NGCFG-UPDATE-1000
</pption>
<opção value = "9">
18-NGCFG-UPDATE-1257
</pption>
<opção value = "10">
2-NGCFG-UPDATE-100
</pption>
<opção value = "11">
3-NGCFG-UPDATE-150
</pption>
<opção value = "12">
4-NGCFG-UPDATE-200
</pption>
<opção value = "13">
5-NGCG-UPDATE-250
</pption>
<opção value = "14">
6-NGCFG-UPDATE-418
</pption>
<opção value = "15">
7-NGCFG-UPDATE-500
</pption>
<opção value = "16">
8-NGCFG-UPDATE-1000
</pption>
<opção value = "17">
9-NGCFG-UPDATE-1000
</pption>
<opção value = "18">
@TODOS
</pption>
<opção value = "19">
@Cnc-bj-4
</pption>
<opção value = "20">
CNC-BJ-Test
</pption>
<opção value = "21">
teste
</pption>
</leclect>
<input type = "text" id = "list-name-for-select">
</div>
<Cript>
var listName = document.getElementById ('list-name-for-Select');
var listSelect = document.getElementById ('list-select'). OnChange = function (e) {
console.log (isto)
if (this.value) {
listName.value = this.value + '| ' + this.options [this.SelectedIndex] .Text;
}outro{
listName.value = ''
}
};
</script>
</body>
</html>