JQuery是一個強大且流行的JavaScript庫，它提供了許多用于簡化Web開發的功能。這篇文章將介紹如何使用JQuery創建一個帶有下拉選項框的輸入框。
要創建輸入框下拉菜單，我們需要使用HTML和CSS代碼創建輸入框和下拉框，并使用JQuery編寫JavaScript代碼來實現下拉框的功能。下面是一個簡單的示例代碼：
<html> <head> <title>下拉輸入框</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div class="input-container"> <input type="text" id="input-box" placeholder="請輸入..."> <ul id="options"> <li>選項1</li> <li>選項2</li> <li>選項3</li> </ul> </div> </body> </html>
我們創建了一個帶有class“input-container”的div容器，其中包含一個input輸入框和一個ul下拉框。下面是CSS代碼：
.input-container {
position: relative;
display: inline-block;
}
#options {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
display: none;
}
#options li {
list-style: none;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
}
#options li:hover {
background-color: #f7f7f7;
}我們使用CSS樣式來設置輸入框和下拉框的位置和樣式。在這里，我們為.input-container設置了“position：relative”，以便在ul下拉框的位置設置“position：absolute”。通過設置“display:none;”，我們將下拉框隱藏在輸入框下方。下面是JQuery代碼：
$(document).ready(function() {
$('#input-box').on('click', function() {
$('#options').slideToggle();
});
$('#options li').on('click', function() {
$('#input-box').val($(this).text());
$('#options').slideUp();
});
$('html').on('click', function(e) {
if (!$(e.target).closest('.input-container').length) {
$('#options').slideUp();
}
});
});使用JQuery，我們為輸入框添加了“click”事件，并在單擊時切換下拉框的顯示狀態。當用戶單擊下拉框中的一個選項時，“click”事件將觸發，并將選定的選項文本設置為輸入框的值。最后，我們使用“html”標記對整個網頁進行事件監測，并在單擊頁面其他位置時關閉下拉框。
如此簡單地使用JQuery，我們就實現了一個帶有下拉功能的輸入框。在實際應用中，我們可以通過調整CSS樣式和JS代碼來實現各種自定義設置和功能，從而增強我們的用戶體驗。