1

作成中のフォームの一部として 2 つのドロップダウン リストがあり、どちらにも mysql データベースから取得されるオプションがあります。最初のドロップダウンでの選択に基づいて、2 番目のドロップダウンのオプションを変更したいと思います。2 番目のリストが静的な場合に 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 が答えでした。これに出くわした好奇心旺盛な人のために、以下は私が思いついた解決策です。最初のドロップダウンから削除する以外は、HTML を変更せずに残しましたonchange="configureDropDownLists(this,'submitter_name')"。上記の 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();
?>
于 2013-11-21T13:52:09.727 に答える
1

データベースからデータを取得するには、AJAX が必要なようです。サーバー側でフォーマットし (JSON を使用するのが最も簡単です)、Javascript のコールバック関数を使用して、受信した JSON データに基づいて 2 番目のドロップダウンを設定します。

于 2013-10-23T03:11:33.750 に答える