php - 第一个下拉菜单自动更改第二个下拉菜单的选项

Question

我有两个下拉菜单，其中的选项不是从数据库获取的。

第一个，让用户选择一个类别。

<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">
    <option value="3">Smartphone</option>
    <option value="8">Charger</option>
</select>

但是当用户改变主意，或者首先选择第二个选项时，现在将显示第二个下拉列表

<select name="items">
    <option value="1">Basketball</option>
    <option value="4">Volleyball</option>
</select>

我的问题是如何实现这一目标？这可以在不使用数据库的情况下完成吗？

谢谢!

Answer 1

请参阅下文，了解不使用数据库的工作示例。

使用 MySQL 数据库的工作示例

如果您想使用数据库连接它，是的，这当然是可能的。考虑这个表:

CREATE TABLE `contents` (
    `id` INT PRIMARY KEY AUTO_INCREMENT,
    `name` VARCHAR (255),
    `parent` INT DEFAULT 0
);

INSERT INTO `contents` (`name`, `parent`) VALUES
    ('Names', 0),
    ('Places', 0),
    ('Animals', 0),
    ('Praveen', 1),
    ('Bill Gates', 1),
    ('Steve Jobs', 1),
    ('India', 2),
    ('New York', 2),
    ('London', 2),
    ('Singapore', 2),
    ('Cat', 3),
    ('Dog', 3),
    ('Tiger', 3),
    ('Deer', 3)

表结构

+----+------------+--------+
| id | name       | parent |
+----+------------+--------+
|  1 | Names      |      0 |
|  2 | Places     |      0 |
|  3 | Animals    |      0 |
|  4 | Praveen    |      1 |
|  5 | Bill Gates |      1 |
|  6 | Steve Jobs |      1 |
|  7 | India      |      2 |
|  8 | New York   |      2 |
|  9 | London     |      2 |
| 10 | Singapore  |      2 |
| 11 | Cat        |      3 |
| 12 | Dog        |      3 |
| 13 | Tiger      |      3 |
| 14 | Deer       |      3 |
+----+------------+--------+

初始 HTML 和 PHP 代码

现在，让我们首先使用 PHP 填充初始 <select> :

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = 0");
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

现在是<select>准备好了。通过其 onchange 函数，我们可以触发 AJAX 事件来获取新的 <select>与家长提供的数据<select> .

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>

现在对于 jQuery 函数，您可以这样做:

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

在 HTML 中，<select> 之后，您需要再给出一个 select与 id如sub .

<select onchange="ajaxfunction(this.value)">
    <!-- Options would have been initially populated here -->
</select>
<select id="sub"></select>

处理 PHP 源代码

终于有process.php的源码了:

<?php
    mysql_connect();
    mysql_select_db("contents");
    $result = mysql_query("SELECT * FROM `contents` WHERE `parent` = " . mysql_real_escape_string($_GET["parent"]));
    while(($data = mysql_fetch_array($result)) !== false)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>

不使用数据库的工作示例

您只需在 PHP 中替换它即可。

<?php
    $parent = array("Name", "Place", "Animals");
    foreach ($parent as $id => $name)
        echo '<option value="s', $id,'">', $name,'</option>'
?>

对于 process.php :

<?php
    $parent = array("Name", "Place", "Animals");
    $s0 = array("Praveen", "Bill Gates", "Steve Jobs");
    foreach (${$_GET["parent"]} as $id => $name)
        echo '<option value="', $data['id'],'">', $data['name'],'</option>'
?>