<div role="listbox">是HTML語言中的一個屬性，用于定義一個列表框的角色。列表框是一種可以選擇一個或多個選項的用戶界面組件，常用于表單中。使用<div role="listbox">可以為列表框指定一個語義化的角色，以便屏幕閱讀器和其他輔助技術可以更好地理解和處理這個元素。
下面我們來看幾個代碼案例，詳細解釋<div role="listbox">的用法和效果。
案例一：

使用<div role="listbox">創建一個簡單的列表框：

<div role="listbox">
<div role="option">選項1</div>
<div role="option">選項2</div>
<div role="option">選項3</div>
</div>

在這個案例中，我們創建了一個簡單的列表框，包含三個選項。每個選項使用<div role="option">來定義，這樣屏幕閱讀器和其他輔助技術可以正確地識別它們。
案例二：

為列表框添加一些交互功能：

<div role="listbox" aria-labelledby="listbox-label" tabindex="0">
<div id="listbox-label">選擇一個選項：</div>
<div role="option" aria-selected="true">選項1</div>
<div role="option">選項2</div>
<div role="option">選項3</div>
</div>

在這個案例中，我們為列表框添加了一些額外的屬性和樣式。通過使用屬性aria-labelledby，我們可以將一個標簽與列表框關聯起來，以提供更好的可訪問性。同時，我們還為列表框添加了一個tabindex屬性，使其可以被鍵盤聚焦并進行交互操作。
案例三：

使用JavaScript和CSS為列表框添加動態效果：

<style>
.active {
background-color: lightblue;
}
</style>
<br>
<script>
function selectOption(option) {
var options = document.querySelectorAll('[role="option"]');
options.forEach(function (item) {
item.classList.remove('active');
});
option.classList.add('active');
}
</script>
<br>
<div role="listbox">
<div role="option" onclick="selectOption(this)">選項1</div>
<div role="option" onclick="selectOption(this)">選項2</div>
<div role="option" onclick="selectOption(this)">選項3</div>
</div>

在這個案例中，我們使用了JavaScript和CSS來為列表框添加動態效果。當用戶點擊一個選項時，通過調用selectOption函數，我們可以為被選中的選項添加一個active類，從而改變其背景顏色。
通過以上的案例代碼，我們可以清楚地了解和使用<div role="listbox">。它提供了一個語義化的角色，使得屏幕閱讀器和其他輔助技術可以更好地理解和處理列表框。同時，我們可以通過添加額外的屬性和樣式，為列表框增加更豐富的交互和動態效果。