首页 > 后端开发 > php教程 > 如何实现根据第一个下拉菜单自动更改第二个下拉菜单中的选项?

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

DDD
发布: 2024-10-21 06:45:02
原创
965 人浏览过

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

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

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

初始设置

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

第一个下拉列表:

<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>
登录后复制

?>

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

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

来源:php
上一篇:如何显示存储为 MySQL BLOB 的图像以及其他内容? 下一篇:如何在没有数据库的情况下创建级联下拉菜单?
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板