1

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

2 回答 2

2

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

查询：

$(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();
?>
于 2013-11-21T13:52:09.727 回答
1

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

于 2013-10-23T03:11:33.750 回答