<div> 寫select 是指使用HTML的<div>元素來實(shí)現(xiàn)下拉列表的效果。一般情況下，我們使用<select>元素來創(chuàng)建下拉列表。然而，在某些情況下，我們可能需要更多的自定義選項(xiàng)，這時候可以使用<div>元素來替代<select>元素。在本文中，我們將介紹一些使用<div>來創(chuàng)建下拉列表的代碼案例，幫助你更好地理解和應(yīng)用這一技術(shù)。

第一個案例是一個基本的下拉列表。我們使用<div>元素來代替<select>元素，并使用CSS樣式來設(shè)置下拉列表的外觀。下面是代碼示例:

<div class="dropdown">
<input type="text" class="dropdown-toggle" data-toggle="dropdown">
<ul class="dropdown-menu">
<li>選項(xiàng)1</li>
<li>選項(xiàng)2</li>
<li>選項(xiàng)3</li>
</ul>
</div>

在上述代碼中，我們使用一個<input>元素來作為下拉列表的觸發(fā)器。當(dāng)用戶點(diǎn)擊輸入框時，會顯示一個<ul>元素，其中包含多個<li>元素作為下拉選項(xiàng)。樣式類"dropdown"用于控制下拉列表的整體樣式。

第二個案例是一個帶有默認(rèn)選擇的下拉列表。我們使用JavaScript來實(shí)現(xiàn)默認(rèn)選擇的功能。下面是代碼示例:

<div class="dropdown">
<input type="text" class="dropdown-toggle" data-toggle="dropdown" value="選項(xiàng)2">
<ul class="dropdown-menu">
<li>選項(xiàng)1</li>
<li>選項(xiàng)2</li>
<li>選項(xiàng)3</li>
</ul>
</div>
<br>
<script>
var dropdownToggle = document.querySelector(".dropdown-toggle");
var dropdownMenu = document.querySelector(".dropdown-menu");
var dropdownOptions = dropdownMenu.querySelectorAll("li");
<br>
  dropdownOptions.forEach(function(option) {
option.addEventListener("click", function() {
dropdownToggle.value = option.innerText;
});
});
</script>

在上述代碼中，我們通過設(shè)置<input>元素的value屬性來定義默認(rèn)選擇。然后，我們使用JavaScript來監(jiān)聽每個下拉選項(xiàng)的點(diǎn)擊事件，并更新輸入框中的值為所選選項(xiàng)的文本值。

第三個案例是一個帶有搜索功能的下拉列表。我們使用JavaScript來實(shí)現(xiàn)搜索功能。下面是代碼示例:

<div class="dropdown">
<input type="text" class="dropdown-toggle" data-toggle="dropdown" placeholder="搜索">
<ul class="dropdown-menu">
<li>選項(xiàng)1</li>
<li>選項(xiàng)2</li>
<li>選項(xiàng)3</li>
</ul>
</div>
<br>
<script>
var dropdownToggle = document.querySelector(".dropdown-toggle");
var dropdownMenu = document.querySelector(".dropdown-menu");
var dropdownOptions = dropdownMenu.querySelectorAll("li");
<br>
  dropdownToggle.addEventListener("input", function() {
var searchValue = dropdownToggle.value.toLowerCase();
<br>
    dropdownOptions.forEach(function(option) {
if (option.innerText.toLowerCase().includes(searchValue)) {
option.style.display = "block";
} else {
option.style.display = "none";
}
});
});
</script>

在上述代碼中，我們通過設(shè)置輸入框的placeholder屬性來提示用戶進(jìn)行搜索。然后，我們使用JavaScript來監(jiān)聽輸入框的輸入事件，并根據(jù)用戶輸入的值來篩選下拉選項(xiàng)。如果用戶輸入的值與選項(xiàng)文本中的任意部分匹配，那么該選項(xiàng)將顯示出來；否則，該選項(xiàng)將被隱藏。

通過上述的代碼案例，我們可以靈活地使用<div>元素來創(chuàng)建自定義的下拉列表。不同于普通的<select>元素，<div>元素提供了更多的自定義和樣式化選項(xiàng)，為我們帶來更好的用戶體驗(yàn)。希望本文能對您理解和應(yīng)用<div>寫select技術(shù)有所幫助。