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

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

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

初始设置

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

第一个下拉列表：

<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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

登录后复制

<选择 id="sub"> ;

处理 PHP 脚本

process.php 脚本将负责生成以下选项基于所选类别的第二个下拉列表。

process.php:

<?php</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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>

登录后复制