Question

我有一个标准（或类）列表，当一个人选择标准的第9或第10时，我想显示另一个下拉列表，他/她可以选择特定的组。

这是第一个列表（类）的代码

<?php
    /*Getting the data to show in drop down list*/
    $sql = $DB_con->prepare( "SELECT DISTINCT cls_id, cls_name FROM class ORDER BY cls_id ASC" );
    $sql->execute();
    $results = $sql->fetchAll();
?>

在表单中，我使用foreach ...

显示了项目

<html>
    <form method="post">
        <select name="class">
            <option value="">SELECT CLASS</option>

            <?php
                foreach ($result as $r)
                {
                    echo '<option value="' .
                         $r["cls_id"] .
                         '">' .
                         $r["cls_name"] .
                         '</option>';
                }
            ?>
        </select>
    </form>

现在从第一个列表中选择特定的类，我想显示下一个将有组的列表。我已准备好代码显示列表中的项目，但不知道我将如何显示或隐藏第二个列表。

我在第一个列表中有超过6个项目，并且组（将出现在下一个列表中）仅用于第一个列表中的2个项目。如您所见，我使用foreach填充第一个列表并计划使用相同的代码填充子类别列表。我只是不知道如何选择那两个项目的子类别列表应该出现。

Answer 1

除非selectbox中有很多选项，否则我只需输出所有使用PHP的组选择框，然后隐藏并用JavaScript显示它们。

对于PHP，只需遍历所有类，并为每个类添加一个包含组的选择框。如果你有A类和B类，你会想要这样的HTML：

<select name="groups-A" data-class="A" class="group-select">
    <option>Option 1</option>
    <option>...</option>
</select>
<select name="groups-B" data-class="B" class="group-select">
    <option>...</option>
</select>

然后这个jQuery将负责隐藏和显示：

//Run this code when the DOM is ready.
$(function() {
    //Execute the function when the select named class changes.
    $("select[name=class]").change(function() {
        //Hide all of the selectboxes.
        $("select.group-select").hide();
        //Show the selected one.
        var selector = "select[data-class=" + $(this).val() + "]";
        $(selector).show();
    }
    //Trigger the change event so you show the right one to begin with.
    $("select[name=class]").trigger("change");
});

您可能希望为类选择框提供ID，以便您可以使用#class代替select[name=class]。此外，您可能想要使用此CSS

.group-select { display: none; }

以避免在JS运行之前显示选择框。

Disclaimar：我还没有测试过这段代码。

在父类

1 个答案: