如何使用JavaScript创建一组动态的下拉菜单

Question

我正在为我们的网站优化表单，该表单使用户可以使用下拉菜单完成IT。我已经弄清楚了如何根据PHP查询填充单个下拉菜单，但是我需要根据该选择来填充另一个下拉菜单。我试图为选择标签使用Onchange属性。我知道我在JavaScript中的查询还不是动态的，但是我只是想让它首先显示下一个下拉，这不是。当我从第一个下拉中选择一些东西时，什么也不会发生。谢谢您的任何帮助。

$query2 = "select distinct Provider_Name from CE_ACTIVITY_LIST_T where IS_ACTIVE = 'YES'";
$result2 = mysql_query($query2, $link) or die(mysql_error());
//$row2 = mysql_fetch_array($result2) or die(mysql_error());
echo "<table border='0'><tr><th>";
echo "Course Provider:</th><td><select name='providerName' id='provider'onchange='getResult()'>";
echo "<option SELECTED>Pick Provider</option>";
$i=0;
while($row2 = mysql_fetch_array($result2))
{
    echo "<option value="" . $row2['Provider_Name'] . "">" . $row2['Provider_Name'] . "</option>";
    $i++;
}
echo "</select></td></tr><tr></tr>";
<script type="text/javascript">
function getResult(field)
{
    var field=field;
    var isEqualTo=document.getElementById('provider');
    document.getElementById('selectCourse').innerHTML = '<?php
    include ('connectionOpen.php');
    $queryCourse="select Course_Title from CE_ACTIVITY_LIST_T where Provider_Name = 'Test 1' and isActive = 'YES'";
    echo "<tr><th>";
    echo "Course Title:</th><td><select name='courseTitle'>";
    echo "<option SELECTED>Which course?</option>";
    $i=0;
    while($row2 = mysql_fetch_array($result2))
    {
        echo "<option value="" . $row2['Course_Title'] . "">" . $row2['Course_Title'] . "</option>";
        $i++;
    }
    echo "</select>";
    echo "</td></tr></table>";
    ?>';
}
</script>

Answer 1

如果要填充另一个列表，则需要使用ajax加载它，可以使用jQuery使其更容易。首先创建将生成第二个选项列表的HTML的PHP脚本，例如。myScript.php，此脚本应接收参数名称。

确保包括jQuery。然后修改您的JavaScript如下：

function onChange()
{
    var name = providerName.value; 
    var url = "path-to-script";
    $.get(url, {name:name}  function(html){
        $("#result").html(html) 
    });
}

而不是第二个选项使用<div id='result'></div>作为新选项列表的占位符。