級聯下拉式選單：根據第一個選擇自動填入第二個選單
在這個情況下，我們要建立兩個互連的下拉式選單，其中第二個選單中的選項根據第一個選單中的選擇動態變化。
初始HTML 結構：
<code class="html"><select name="category">
<option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<select name="items">
<!-- Options will be populated dynamically -->
</select></code>事件處理：
為了實現所需的功能，我們將在在第一個下拉清單中使用事件監聽器，以便在選擇變更時觸發Ajax 呼叫。
<code class="javascript"><script type="text/javascript">
function changeItems(categoryId) {
$.ajax({
url: 'process.php?category=' + categoryId,
success: function(data) {
$("#items").html(data);
}
});
}
</script></code>處理 Ajax請求：
在 process.php 檔案中，我們將根據所選類別建立第二個下拉清單的選項。
<code class="php">$categoryId = $_GET['category'];
switch ($categoryId) {
case 1:
$options = array(
'Smartphone', 'Charger'
);
break;
case 2:
$options = array(
'Basketball', 'Volleyball'
);
break;
// ...
}
foreach ($options as $option) {
echo "<option value='$option'>$option</option>";
}</code>動態更新第二個下拉清單:
Ajax 呼叫使用 process.php 中產生的新選項填入 #items 元素。
<code class="javascript">$("#items").html(data);</code>不含資料庫的自訂實作：
如果您沒有資料庫，您可以手動定義陣列中每個類別的選項，並透過JavaScript 更新第二個下拉清單。
<code class="javascript">// Define options for each category
const categories = ['First', 'Second', 'Third', 'Fourth'];
const optionArrays = [
['Smartphone', 'Charger'],
['Basketball', 'Volleyball'],
// ...
];
// Update second dropdown on category change
$(document).on('change', 'select[name="category"]', function() {
const selectedCategory = $(this).val();
const options = optionArrays[selectedCategory - 1]; // Subtract 1 to match array indices
$('#items').empty();
for (let i = 0; i < options.length; i++) {
$('#items').append(`<option value="${options[i]}">${options[i]}</option>`);
}
});</code>以上是如何建立具有自動填入第二個選單的級聯下拉選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
