如何实现根据第一个下拉菜单自动更改第二个下拉菜单中的选项？

根据第一个下拉菜单选择自动更改第二个下拉菜单中的选项

创建多个下拉菜单时，第二个下拉菜单中的选项菜单取决于第一个菜单中所做的选择，无需依赖数据库即可实现此目的。

初始设置

第一个下拉菜单将显示类别列表，而第二个下拉列表将显示与所选类别关联的项目。

第一个下拉列表：

<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>

第二个下拉菜单中的动态选项

要根据第一个下拉列表中的选择更新第二个下拉列表中的选项，我们需要一个 AJAX 函数将所选类别发送到 PHP 脚本。

AJAX 函数：

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

pre>

此函数附加到第一个下拉列表的 onchange 事件。

在 HTML 中，放置另一个 id 为“sub”的 select 元素来显示动态生成的选项。

<选择 onchange="ajaxfunction(this.value)"></p><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

<选择 id="sub"> ;

处理 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>'</p>

?>

在本例中，我们使用数组来定义类别-项目关系。然而，这也可以很容易地适应从数据库中检索数据。

以上是如何实现根据第一个下拉菜单自动更改第二个下拉菜单中的选项？的详细内容。更多信息请关注PHP中文网其他相关文章！