Manchmal benötigen wir ein optionales Dropdown-Feld, um Inhalte auszuwählen, aber es besteht auch die Anpassung der Eingabe. Für diese Anforderung verwenden die meisten Websites ein Dropdown-Box und einen Eingabetxt und geben eine Auswahl parallel oder Filiale. Wir möchten also, dass es wie ein Dropdown-Feld aussieht, das eingegeben oder ausgewählt werden kann. Wie machen wir das?
Tatsächlich können wir diesen Effekt durch CSS -Positionierung und einen kleinen JavaScript -Code simulieren.
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> bearbeitbares und ausgewählbares Dropdown-Feld </title>
<meta charset = "utf-8">
<Styles>
.Listname-Input {
Farbe: #333;
Schriftfamilie: Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
Schriftgröße: 15px;
Schriftgewicht: fett;
Höhe: 50px;
Rand: 0px;
Polsterung: 0px;
Position: Relativ;
Breite: 530px;
}
.Listname für die Auswahl {
Grenze: 0;
Farbe: #555;
Höhe: 20px;
Beleuchtungsfarbe: RGB (255, 255, 255);
Zeilenhöhe: 20px;
Rand: 0 0 10px 0;
Umrissfarbe: #555;
Umriss-Offset: 0PX;
Umrissstil: Keine;
Umrissbreite: 0px;
Polsterung: 4px 6px;
Position: absolut;
Oben: 1PX;
links: 3px;
vertikaler Align: Mitte;
Breite: 486px;
}
.Listname-Input-für-Select: Focus {
Grenze: 0;
Grenzradius: 0;
}
.List-select {
Hintergrundfarbe: #fff;
Grenze: 1PX #CCC Solid;
Border-Radius: 4px;
Farbe: #555;
Cursor: Zeiger;
Höhe: 30px;
links: 0px;
Rand: 0 0 10px 0;
Polsterung: 4px 6px;
Position: absolut;
Oben: 0px;
vertikaler Align: Mitte;
weißer Raum: PRE;
Breite: 530px;
}
</style>
</head>
<body>
<div id = "List-name-Input">
<select type = "text" id = "list-select">
<Option Value = "">
Neu
</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">
@ALLE
</Option>
<Option Value = "19">
@CNC-BJ-4
</Option>
<Option Value = "20">
CNC-BJ-Test
</Option>
<Option Value = "21">
prüfen
</Option>
</select>
<input type = "text" id = "list-name-for-select">
</div>
<Script>
var listName = document.getElementById ('Listenname-für-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;
}anders{
ListName.Value = ''
}
};
</script>
</body>
</html>