如何實現根據第一個下拉式選單自動變更第二個下拉式選單中的選項？

根據第一個下拉式選單選擇自動變更第二個下拉式選單中的選項

建立多個下拉式選單時，第二個下拉式選單中的選項選單取決於第一個選單中所做的選擇，無需依賴資料庫即可實現此目的。

初始設定

第一個下拉式選單將顯示類別列表，而第二個下拉列表將顯示與所選類別關聯的項目。

第一個下拉清單：

<select name="category"><pre class="brush:php;toolbar:false"><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 name="items"><br></select><br>

第二個下拉式選單中的動態選項 h3>

要根據第一個下拉清單中的選擇更新第二個下拉列表中的選項，我們需要一個AJAX 函數將所選類別傳送到PHP 腳本。

AJAX 函數：

<script type="text/javascript"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}</script>

pre>

此函數附加到第一個下拉清單的onchange 事件。

在 HTML 中，放置另一個 id 為「sub」的 select 元素來顯示動態產生的選項。

<pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

處理PHP 腳本

process.php 腳本將負責產生以下選項基於所選類別的第二個下拉清單。

process.php:

<?php </p><pre class="brush:php;toolbar:false">$parent = array(
    "First" => array("Smartphone", "Charger"),
    "Second" => array("Basketball", "Volleyball"),
    "Third" => array("Apple", "Orange"),
    "Fourth" => array("Dog", "Cat")
);

foreach ($parent[$_GET["parent"]] as $id => $name)
    echo '<option value="', $id,'">', $name,'</option>'

?>

在本例中，我們使用陣列來定義類別-項目關係。然而，這也可以很容易地適應從資料庫中檢索資料。

以上是如何實現根據第一個下拉式選單自動變更第二個下拉式選單中的選項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！