Parfois, nous avons besoin d'une boîte déroulante en option pour sélectionner le contenu, mais il est également nécessaire de personnaliser l'entrée. Pour cette exigence, la plupart des sites Web utilisent une boîte déroulante et un texte d'entrée et donnent des sélections en parallèle ou en branche. Donc, nous voulons qu'il ressemble à une boîte déroulante qui peut être entrée ou sélectionnée, alors comment faisons-nous?
En fait, nous pouvons simuler cet effet par le positionnement CSS et un peu de code JavaScript.
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> Boîte déroulante modifiable et sélectionnable </TITAL>
<meta charset = "utf-8">
<style>
.List-name-Input {
Couleur: # 333;
Font-Family: Tahoma, «Microsoft Yahei», «Segoe ui», Arial, «Microsoft Yahei», Simsun, Sans-Serif;
taille de police: 15px;
Police-poids: Bold;
hauteur: 50px;
marge: 0px;
rembourrage: 0px;
Position: relative;
Largeur: 530px;
}
.List-name-pour-sélection {
bordure: 0;
Couleur: # 555;
hauteur: 20px;
Color d'éclairage: RVB (255, 255, 255);
hauteur de ligne: 20px;
marge: 0 0 10px 0;
Color de contour: # 555;
Offset-décalage: 0px;
style contour: aucun;
largeur de ligne: 0px;
rembourrage: 4px 6px;
Position: absolue;
en haut: 1px;
Gauche: 3px;
Adigne vertical: milieu;
Largeur: 486px;
}
.List-name-int-pour-sélection: focus {
bordure: 0;
Border-Radius: 0;
}
.List-Select {
Color d'arrière-plan: #FFF;
Border: 1px #ccc solide;
Border-Radius: 4px;
Couleur: # 555;
curseur: pointeur;
hauteur: 30px;
gauche: 0px;
marge: 0 0 10px 0;
rembourrage: 4px 6px;
Position: absolue;
En haut: 0px;
Adigne vertical: milieu;
Espace blanc: pré;
Largeur: 530px;
}
</ style>
</ head>
<body>
<div id = "list-name-input">
<select type = "text" id = "list-select">
<Option Value = "">
Nouveau
</opoption>
<Option Value = "0">
10-NGCFG-Update-1000
</opoption>
<Option Value = "1">
11-NGCFG-Update-1000
</opoption>
<Option Value = "2">
111
</opoption>
<Option Value = "3">
12-NGCFG-Update-1000
</opoption>
<Option Value = "4">
13-NGCFG-Update-1000
</opoption>
<Option Value = "5">
14-NGCFG-Update-1000
</opoption>
<Option Value = "6">
15-NGCFG-Update-1000
</opoption>
<Option Value = "7">
16-NGCFG-Update-1000
</opoption>
<Option Value = "8">
17-NGCFG-Update-1000
</opoption>
<Option Value = "9">
18-NGCFG-Update-1257
</opoption>
<Option Value = "10">
2-NGCFG-Update-100
</opoption>
<Option Value = "11">
3-NGCFG-Update-150
</opoption>
<Option Value = "12">
4-NGCFG-Update-200
</opoption>
<Option Value = "13">
5-NGCG-Update-250
</opoption>
<Option Value = "14">
6-NGCFG-Update-418
</opoption>
<Option Value = "15">
7-NGCFG-Update-500
</opoption>
<Option Value = "16">
8-NGCFG-Update-1000
</opoption>
<Option Value = "17">
9-NGCFG-Update-1000
</opoption>
<Option Value = "18">
@TOUS
</opoption>
<Option Value = "19">
@ CNC-BJ-4
</opoption>
<Option Value = "20">
CNC-BJ - Test
</opoption>
<Option Value = "21">
test
</opoption>
</lect>
<input type = "text" id = "list-name-for-selec">
</div>
<cript>
var listname = document.getElementById ('list-name-for-select');
var listSelect = document.getElementById ('list-select'). onchange = function (e) {
console.log (ceci)
if (this.value) {
listName.value = this.value + '| '+ this.options [this.selectedIndex] .Text;
}autre{
listName.value = ''
}
};
</cript>
</docy>
</html>