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

Question

表类(class)

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)

表分支

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

以及我想要解决方案的代码，我已经能够在其中获取第一个下拉列表的所有类(class)

<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 个类(class)，则应自动从第二个下拉列表中的分支表中获取与该相关类(class)相关的数据。如果他们是 IF 条件会更好

      <select name="sDepartment">

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

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

Civil Engineering
Computer Sci & Technology
Electrical Engineering

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

Answer 1

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

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

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

例如，使用 this.value 设置你的第一个带有 onChange 的 select 语句，这样当它发生变化时它会将值发送到函数(并且记得设置 ID 以便我们可以使用 getElementByID) :

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

关于 courseName select 语句的重要说明 - 在示例中，每个选项的“值”为空 - 设置此解决方案很重要。像这样:

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

第二个下拉的select可以这样(需要设置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;'每次调用该函数时，部分都会清除第二个列表中的所有选项

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

• 使用 php $list_count 变量是因为 select 语句中的每个选项都需要一个从 0 开始的索引。此变量表示每个项目的索引并在每个循环中重置，以便索引始终正确递增。

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