jQuery combobox 級聯,可以實現在一個下拉列表中選擇一項后,根據選項的值動態更新另一個下拉列表。這在一些需要根據用戶選擇的內容來過濾和展示數據的情況下非常有用。
下面是一個示例代碼:
<select id="category"> <option value="fruit">水果</option> <option value="vegetable">蔬菜</option> </select> <select id="item"> <option value="">請選擇</option> </select> <script> $(document).ready(function() { var items = { "fruit": ["蘋果", "香蕉", "橘子"], "vegetable": ["西紅柿", "土豆", "白菜"] }; $("#category").change(function() { var selectedCategory = $(this).val(); var options = ""; for (var i = 0; i < items[selectedCategory].length; i++) { options += "<option value='" + items[selectedCategory][i] + "'>" + items[selectedCategory][i] + "</option>"; } $("#item").html(options); }); }); </script>
在這個例子中,我們在第一個下拉列表中提供了兩個選項:水果和蔬菜。如果用戶選擇了水果,第二個下拉列表將被更新并顯示蘋果、香蕉和橘子等可供選擇的水果。如果用戶選擇了蔬菜,那么第二個下拉列表會顯示西紅柿、土豆和白菜等可供選擇的蔬菜。