Question

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

Answer 1

正如所建议的，AJAX就是答案。对于遇到这种情况的好奇者，下面是我提出的解决方案。除了从第一个下拉列表中删除onchange="configureDropDownLists(this,'submitter_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();
?>

Answer 2

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

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

2 个答案: