บางครั้งเราต้องการกล่องแบบเลื่อนลงที่เป็นตัวเลือกเพื่อเลือกเนื้อหา แต่ก็มีความจำเป็นในการปรับแต่งอินพุต สำหรับข้อกำหนดนี้เว็บไซต์ส่วนใหญ่ใช้กล่องแบบเลื่อนลงและข้อความอินพุตและให้ตัวเลือกในแบบขนานหรือสาขา ดังนั้นเราต้องการให้มันดูเหมือนกล่องดรอปดาวน์ที่สามารถป้อนหรือเลือกได้ดังนั้นเราจะทำอย่างไร?
ในความเป็นจริงเราสามารถจำลองเอฟเฟกต์นี้ผ่านการวางตำแหน่ง CSS และรหัส JavaScript เล็กน้อย
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> กล่องแบบเลื่อนลงที่สามารถแก้ไขได้และเลือกได้ </title>
<meta charset = "utf-8">
<style>
.List-name-input {
สี: #333;
Font-Family: Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
ขนาดตัวอักษร: 15px;
Font-Weight: ตัวหนา;
ความสูง: 50px;
มาร์จิ้น: 0px;
Padding: 0px;
ตำแหน่ง: ญาติ;
ความกว้าง: 530px;
-
.List-name-for-select {
ชายแดน: 0;
สี: #555;
ความสูง: 20px;
แสงสี: RGB (255, 255, 255);
ความสูงของสาย: 20px;
มาร์จิ้น: 0 0 10px 0;
โครงร่างสี: #555;
Outline-Offset: 0PX;
โครงร่างสไตล์: ไม่มี;
โครงร่างความกว้าง: 0px;
Padding: 4px 6px;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 1px;
ซ้าย: 3px;
แนวตั้ง-แนว: กลาง;
ความกว้าง: 486px;
-
.List-name-input-for-select: focus {
ชายแดน: 0;
แนวชายแดน: 0;
-
. ลิสต์เลือก {
พื้นหลังสี: #FFF;
ชายแดน: 1px #CCC Solid;
แนวชายแดน: 4px;
สี: #555;
เคอร์เซอร์: ตัวชี้;
ความสูง: 30px;
ซ้าย: 0px;
มาร์จิ้น: 0 0 10px 0;
Padding: 4px 6px;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
แนวตั้ง-แนว: กลาง;
พื้นที่สีขาว: ก่อน;
ความกว้าง: 530px;
-
</style>
</head>
<body>
<div id = "list-name-input">
<select type = "text" id = "list-select">
<ตัวเลือกค่า = "">
ใหม่
</petion>
<ตัวเลือกค่า = "0">
10-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "1">
11-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "2">
111
</petion>
<ตัวเลือกค่า = "3">
12-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "4">
13-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "5">
14-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "6">
15-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "7">
16-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "8">
17-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "9">
18-NGCFG-UPDATE-1257
</petion>
<ตัวเลือกค่า = "10">
2-NGCFG-UPDATE-100
</petion>
<ตัวเลือกค่า = "11">
3-NGCFG-UPDATE-150
</petion>
<ตัวเลือกค่า = "12">
4-NGCFG-UPDATE-200
</petion>
<ตัวเลือกค่า = "13">
5-NGCG-UPDATE-250
</petion>
<ตัวเลือกค่า = "14">
6-NGCFG-UPDATE-418
</petion>
<ตัวเลือกค่า = "15">
7-NGCFG-UPDATE-500
</petion>
<ตัวเลือกค่า = "16">
8-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "17">
9-NGCFG-UPDATE-1000
</petion>
<ตัวเลือกค่า = "18">
@ทั้งหมด
</petion>
<ตัวเลือกค่า = "19">
@CNC-BJ-4
</petion>
<ตัวเลือกค่า = "20">
CNC-BJ-ทดสอบ
</petion>
<ตัวเลือกค่า = "21">
ทดสอบ
</petion>
</เลือก>
<input type = "text" id = "list-name-for-select">
</div>
<script>
var listName = document.getElementById ('list-name-for-select');
var listselect = document.getElementById ('รายการเลือก'). onChange = function (e) {
console.log (นี่)
if (this.value) {
ListName.Value = this.value + '| ' + this.options [this.selectedIndex] .Text;
}อื่น{
ListName.value = ''
-
-
</script>
</body>
</html>