根据第一个 <select> 下拉选项填充第二个 <select> 下拉列表答案

【问题标题】：Populate second <select> drop down based on the first <select> drop down option根据第一个 <select> 下拉选项填充第二个 <select> 下拉列表
【发布时间】：2014-06-09 16:11:20
【问题描述】：

我正在尝试根据第一个选择的下拉选项填充我的第二个下拉列表。

这是我目前的工作：

form.php - 我使用 javascript 来调用 getgeneral.php。当用户从（第一个）下拉列表中选择时，将显示第二个下拉列表：

<html>
<head>
<script type="text/javascript">
function get_states() { // Call to ajax function
    var classitem = $('#classitem').val();
    var dataString = "classitem="+classitem;
    $.ajax({
        type: "POST",
        url: "getgeneral.php",
        data: dataString,
        success: function(html)
        {
            $("#get_general").html(html);
        }
    });
}
</script>
</head>
<body>

<form action="" method="POST">

<?php 

include('conn.php');

$result=mysqli_query($con,"SELECT * FROM classtable");

?>

<select id="classitem" name="classitem" onchange="get_states();">
<option value=''>Select</option>
<?php 

while ($row = mysqli_fetch_array($result)) {
    echo "<option value='" . $row['genclasscode'] . "'>" . $row['description'] . "</option>";}

?>
</select>

<div id="get_general"></div>

</form>

</body>
</html>

这是 getgeneral.php，它将根据第一个下拉列表获取数据：

<?php

include('conn.php');

if ($_POST) {
    $classitem = $_POST['classitem'];
    if ($classitem != '') {

       $result1=mysqli_query($con,"SELECT * FROM generalclass WHERE genclasscode='$classitem'");

       echo "<select name='classitem'>";
       echo "<option value=''>Select</option>"; 
       while ($row = mysqli_fetch_array($result1)) {
          echo "<option value='" . $row['specclassid'] . "'>" . $row['description'] . "</option>";}
       echo "</select>";
    }
    else
    {
        echo  '';
    }
}

?>

问题：第二个下拉菜单不会显示。运行 form.php

时没有出现错误

【问题讨论】：

你能在改变第一个值时检查你的网络请求吗？它有时会告诉你一个不会输出的错误。打开页面后点击F12然后捕获请求
Uncaught ReferenceError: $ is not defined
您忘记包含 jquery，或者您有冲突。如果代码完整，看起来像前者
你的 <head> 中是否包含了 jQuery 库？？？

标签： javascript php html ajax

【解决方案1】：

抱歉，这个问题太晚了。

问题是我忘记在我的代码中包含 jQuery。

我在 <head> </head> 部分之间包含这样的 jQuery：

<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.4.custom/css/custom-theme/jquery-ui-1.10.4.custom.min.css">
<script src="jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

感谢 Bryan 和 Chitowns24 在他们上面的 cmets 上。

【讨论】：