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

【问题标题】：Pull dropdown Options from a DB based on selection in another dropdown根据另一个下拉列表中的选择从数据库中拉下拉选项
【发布时间】：2013-10-23 02:42:17
【问题描述】：

我有两个下拉列表作为我正在创建的表单的一部分，它们都有从 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>

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);
}

【问题讨论】：

标签： javascript php mysql ajax

【解决方案1】：

正如建议的那样，AJAX 就是答案。对于遇到此问题的任何好奇的人，以下是我提出的解决方案。除了从第一个下拉列表中删除 onchange="configureDropDownLists(this,'submitter_name')" 之外，我保持 HTML 不变。我使用了下面的 AJAX 和 PHP，而不是上面的 Javascript。效果非常好。

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();
?>

【讨论】：

【解决方案2】：

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

【讨论】：

我认为它可能需要的不仅仅是 PHP 和 Javascript。在这一点上，我对 AJAX/JSON 不是很熟悉，但它给了我一些可以使用的东西。谢谢。
很高兴为您提供帮助。对于它的价值，jQuery 有一个非常好的 AJAX 库，它可以让你的生活更轻松一些。一开始看起来很吓人。但是做几个小例子来掌握它，你应该很快就会有你的解决方案。