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

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

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

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

我的问题是我该如何实现？不用数据库就可以做到吗？

谢谢！

最佳答案

请参见下面的内容，在不使用数据库的情况下查看工作示例。

使用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>'
?>

关于php - 第一个下拉菜单可自动更改第二个下拉菜单的选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32563203/