Javascript 根据另一个下拉列表中的选择从数据库中拉出下拉选项

作为我正在创建的表单的一部分，我有两个下拉列表，它们都有从mysql数据库中提取的选项。我希望第二个下拉列表中的选项根据第一个下拉列表中的选择进行更改。我知道如何在第二个列表是静态的情况下使用Javascript实现这一点，但我希望这两个下拉列表都能从数据库中动态提取。下面是我目前使用的HTML和Javascript。任何想法都很好

HTML:
<form>
    <label for="org_name">Organization Name:</label>
    <select id="org_name" name="org_name" onchange="configureDropDownLists(this,'submitter_name')">
        <option value="empty">&nbsp;</option>
        <?php
            mysql_connect("database", "username", "password") or die(mysql_error ());
            mysql_select_db("databaseName") or die(mysql_error());
            $query = "SELECT * FROM Table";
            $result = mysql_query($query);
            while($row = mysql_fetch_array($result)){
                echo "<option value='" . $row['org_name'] . "'>" . $row['org_name'] . "</option>";
            }
            mysql_close();
        ?>
    </select>
    <label for="submitter_name">Request Submitted By:</label>
    <select id="submitter_name" name="submitter_name">
        <option value="empty">&nbsp;</option>
    </select>
    <input type="Submit" value="Submit">
</form>

HTML：
机构名称：
请求提交人：

Javascript:

function configureDropDownLists(org_name,submitter_name) {
    var org = new Array('Submitter 1', 'Submitter 2');

    switch (org_name.value) {
        case 'org':
            document.getElementById(submitter_name).options.length = 1;
            for (i = 0; i < org.length; i++) {
                createOption(document.getElementById(submitter_name), org[i], org[i]);
            }
            break;
        default:
            document.getElementById(submitter_name).options.length = 1;
            break;
    }

    createOption(document.getElementById(submitter_name), 'Other', 'Other');
        if (org_name.value === 'empty') {
            document.getElementById(submitter_name).options.length = 1;
    }
}


function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

功能配置下拉列表（组织名称、提交者名称）{
var org=新数组（“提交者1”、“提交者2”）；
开关（组织名称.值）{
案例“组织”：
document.getElementById（提交者名称）.options.length=1；
对于（i=0；i

听起来您需要一些AJAX来从数据库中提取数据，在服务器端格式化（JSON可能最容易使用），然后使用Javascript中的回调函数根据收到的JSON数据填充第二个下拉列表

正如所建议的，AJAX就是答案。对于任何好奇的人来说，下面是我提出的解决方案。除了从第一个下拉列表中删除

onchange=“configureDropDownLists（这个，'submitter\u name'）”

之外，我没有改变HTML。我没有使用上面的Javascript，而是使用了下面的AJAX和PHP。效果非常好

JQuery：

$(document).ready(function() {
    $("#org_name").on("change", function() {
        var orgName = document.getElementById("org_name").value;
        $.post('admin_list.php', { org: orgName }, function(result) {
            $('#submitter_name').html(result);
            }
        );
    });
});

以及引用的PHP页面：

<?php
    mysql_connect("database", "username", "password") or die(mysql_error ());
    mysql_select_db("databaseName") or die(mysql_error());
    $org_name = $_REQUEST['org'];
    $query = mysql_query("SELECT * FROM Table WHERE user = '$org_name'");

    while($row = mysql_fetch_array($query)){
        echo "<option>" . $row['admin_first_name'] . " " . $row['admin_last_name'] . "</option>";
    }    
    mysql_close();
?>

---

我想这可能需要的不仅仅是PHP和Javascript。目前我对AJAX/JSON不是很熟悉，但它给了我一些可以使用的东西。谢谢，很乐意帮忙。值得一提的是，jQuery有一个非常好的AJAX库，可以让您的生活更轻松。一开始和他一起工作看起来很吓人。但是，做几个小例子来掌握它的窍门，你应该很快就会有你的解决方案。