如何在 PHP 中创建动态下拉列表？

Question

表courses

courseID    courseName
   1    Diploma-Polytechnic
   2    UG-Bachelor of Architecture (B.Arch)
   3    UG-Bachelor of Engineering (B.E)
   4    UG-Bachelor of Technology (B.Tech)
   5    PG-Master of Architecture (M.Arch)

表branch

branchID    courseID    branchName
1              1    Civil Engineering
2              1    Computer Sci & Technology
3              1    Electrical Engineering
4              2    E&TC
5              2    Mechanical Engineering

以及我想要解决方案的代码，我已经能够获取第一个下拉列表的所有课程

<select name="courseName">
      <option value="">Select Courses</option>
    <?php $sql = "SELECT * FROM courses ";
    $res = mysql_query($sql) or die(mysql_error());
    while($row=mysql_fetch_assoc($res)) {
      ?> 
    <option value=""><?php echo $row['courseName']; ?></option>
    <?php } ?>
    </select>

第二个下拉列表保持为空，因为我想要这样的东西。

如果用户从第一个下拉列表中选择 1 门课程，则应自动从具有该相关课程的第二个下拉列表中的分支表中获取数据。如果他们是 IF 条件会更好

      <select name="sDepartment">

    <option value="">Department You Study</option>
     <option value="">  </option></select>

例如，如果用户从第一个下拉列表中选择Diploma-Polytechnic of ID 1 那么第二个下拉列表应该有选项

Civil Engineering
Computer Sci & Technology
Electrical Engineering

如果可能，请提供与我的代码兼容的 JS/AJAX 代码。

Answer 1

如果您不想使用 Ajax，您可以在页面加载到您的脚本标签时在常规 javascript 中设置不同的列表，然后让第一个下拉列表的“onchange”更改第二个下拉列表的内容将选择的内容切换到您需要的任何预建组。

基本上，在第一个下拉列表更改时根据需要重建下拉列表的 javascript 函数中的第二个下拉列表具有所有不同的可能选项。

这将需要 javascript、PHP 和 mysql（您已经在使用）的组合，并且根本不需要任何 Ajax 甚至 jQuery。

例如，用这样的 onChange 设置您的第一个 select 语句，使用 this.value 以便在它更改时将值发送到函数（并记住设置 ID 以便我们可以使用 getElementByID） ：

 <select name="courseName" id="courseName" onChange="setBranchList( this.value )" >

关于 courseName 选择语句的重要说明 - 在示例中，每个选项的“值”为空 - 设置它以使该解决方案正常工作很重要。像这样：

 <option value="<?php echo $row['courseID']; ?>"><?php echo $row['courseName']; ?></option>

第二个下拉菜单的选择可能是这样的（需要设置ID）：

 <select name="sDepartment" id="sDepartment">

然后有一个像这样的 JS 函数，其中包含一些带有嵌套 while 循环的 PHP，它选择外部循环中第一个下拉列表的所有值，然后为内部循环中的第二个下拉列表创建所有可能值的构建语句。

<script type="text/javascript">
function setBranchList( courseID )
{
   var selector_to_fill = document.getElementById("sDepartment");
   selector_to_fill.options.length = 0;

    <?php 

    $course_query = "SELECT * FROM courses ORDER BY courseID";
    $course_result = mysql_query($course_query);

    while ($course_detail = mysql_fetch_array($course_result))
    { ?>

        if (courseID == '<?php echo $course_detail['courseID']; ?>'){

        <?php $list_count = 0;

            $branch_query = "SELECT * FROM branch WHERE courseID = '$course_detail[courseID]' ORDER BY branchID";
            $branch_result = mysql_query($branch_query);

            while ($branch_detail = mysql_fetch_array($branch_result))
            { ?>

                selector_to_fill.options[<?php echo $list_count; ?>]=new Option("<?php echo $branch_detail['branchName']; ?>", "<?php echo $branch_detail['branchID']; ?>", false, false);

                <?php

                $list_count++;

            } ?>
        }
    <?php 
    } ?>
}
</script>

当用户访问您的页面时，PHP 会在 setBranchList 函数中根据您的数据库中的任何内容构建一系列 IF 语句，然后再将其发送给用户，因此用户得到的是一些如下所示的 javascript：

        if (courseID == '1'){

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                   

                selector_to_fill.options[1]=new Option("Civil Engineering", "1", false, false);         

                selector_to_fill.options[2]=new Option("Computer Sci & Technology", "2", false, false);         

                selector_to_fill.options[3]=new Option("Electrical Engineering", "3", false, false);            
                            }

        if (courseID == '2'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               

                selector_to_fill.options[1]=new Option("E&TC", "4", false, false);          

                selector_to_fill.options[2]=new Option("Mechanical Engineering", "5", false, false);            
                            }

        if (courseID == '3'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }

        if (courseID == '4'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }

        if (courseID == '5'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }
        }

关于这个例子的一些注释：

• 'selector_to_fill.options.length = 0;'每次调用该函数时，part 都会清除第二个列表中的所有选项

• 列表是使用带有'new Option' 的DOM 构建的。

1234563 p>

• 在我了解 jquery 和 ajax 之前我很久以前就构建了这个，并在发布之前再次测试了这个解决方案以确保它仍然有效：p

Answer 2

你必须使用 Ajax：

在更改您的第一个选择时，调用一个 Javascript 函数，该函数会将所选选项的值发布到您的 PHP 代码中，该函数应返回例如与发送的值相对应的值数组。

如果 select 1 更改：调用将值发布到 PHP 代码的函数，然后：使用结果填充您的 select 2。

您可以使用非常简单的 JQuery！

发帖：https://api.jquery.com/jquery.post/

收听变化：https://api.jquery.com/change/