Terkadang kita membutuhkan kotak drop-down opsional untuk memilih konten, tetapi ada juga kebutuhan untuk menyesuaikan input. Untuk persyaratan ini, sebagian besar situs web menggunakan kotak drop-down dan teks input, dan memberikan pilihan secara paralel atau cabang. Jadi, kami ingin terlihat seperti kotak drop-down yang dapat dimasukkan atau dipilih, jadi bagaimana kami melakukannya?
Bahkan, kita dapat mensimulasikan efek ini melalui penentuan posisi CSS dan kode javascript kecil.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> kotak drop-down yang dapat diedit dan dapat dipilih </iteme>
<meta charset = "UTF-8">
<tyle>
.list-name-input {
Warna: #333;
Font-Family: Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
Ukuran font: 15px;
font-weight: tebal;
Tinggi: 50px;
margin: 0px;
padding: 0px;
Posisi: kerabat;
Lebar: 530px;
}
.list-name-for-select {
Perbatasan: 0;
Warna: #555;
Tinggi: 20px;
LIGHTING-COLOR: RGB (255, 255, 255);
Line-Height: 20px;
Margin: 0 0 10px 0;
Outline-Color: #555;
Offset outline: 0px;
Garis besar: tidak ada;
outline-lebar: 0px;
padding: 4px 6px;
Posisi: Absolute;
Atas: 1px;
Kiri: 3px;
Vertikal-Align: tengah;
Lebar: 486px;
}
.list-name-input-for-select: focus {
Perbatasan: 0;
Border-Radius: 0;
}
.list-select {
Latar Belakang-Color: #FFF;
Perbatasan: 1px #ccc solid;
Border-Radius: 4px;
Warna: #555;
kursor: pointer;
Tinggi: 30px;
Kiri: 0px;
Margin: 0 0 10px 0;
padding: 4px 6px;
Posisi: Absolute;
Atas: 0px;
Vertikal-Align: tengah;
SPACE PUTIH: Pra;
Lebar: 530px;
}
</tyle>
</head>
<body>
<Div id = "daftar-input-nama">
<Pilih type = "Text" id = "Daftar-Select">
<nilai opsi = "">
Baru
</potion>
<nilai opsi = "0">
10-NGCFG-update-1000
</potion>
<nilai opsi = "1">
11-NGCFG-update-1000
</potion>
<Nilai opsi = "2">
111
</potion>
<nilai opsi = "3">
12-NGCFG-update-1000
</potion>
<Nilai opsi = "4">
13-NGCFG-update-1000
</potion>
<Nilai opsi = "5">
14-NGCFG-update-1000
</potion>
<Nilai opsi = "6">
15-NGCFG-update-1000
</potion>
<nilai opsi = "7">
16-NGCFG-update-1000
</potion>
<Nilai opsi = "8">
17-NGCFG-update-1000
</potion>
<Nilai opsi = "9">
18-NGCFG-update-1257
</potion>
<nilai opsi = "10">
2-NGCFG-update-100
</potion>
<nilai opsi = "11">
3-NGCFG-update-150
</potion>
<nilai opsi = "12">
4-NGCFG-update-200
</potion>
<nilai opsi = "13">
5-NGCG-update-250
</potion>
<nilai opsi = "14">
6-NGCFG-update-418
</potion>
<nilai opsi = "15">
7-NGCFG-update-500
</potion>
<nilai opsi = "16">
8-NGCFG-update-1000
</potion>
<nilai opsi = "17">
9-NGCFG-update-1000
</potion>
<nilai opsi = "18">
@SEMUA
</potion>
<Nilai opsi = "19">
@CNC-BJ-4
</potion>
<Nilai opsi = "20">
CNC-BJ-Test
</potion>
<nilai opsi = "21">
tes
</potion>
</pilih>
<input type = "text" id = "daftar-nama-untuk-select">
</div>
<script>
var listName = document.getElementById ('daftar-nama-untuk-select');
var listSelect = document.geteLementById ('daftar-select'). onchange = function (e) {
Console.log (ini)
if (this.value) {
ListName.Value = this.Value + '| ' + this.options [this.selectedIndex] .text;
}kalau tidak{
ListName.Value = ''
}
};
</script>
</body>
</html>