关于javascript：在不同的HTML下拉菜单中显示数据库值


Display Database Values on Different HTML Dropdown Selections

我有一个下拉列表，该列表与数据库表中的数据一起导入。根据选择的内容，我想显示一个表，该表显示与下拉列表中选择的数字相关的必要信息。因此，例如，如果我在下拉列表中选择MR_ID为1，则我希望Supp_ID值(可以大于1个值)显示在表中。我该怎么办？

该表只有2列，即MR_ID(在下拉列表中显示)和Supp_ID。

这是我用于foreach循环的查询，到目前为止是我的HTML / PHP，后面还有一些JavaScript

1
2
3
4
5
6
7
$dbh = new PDO("sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sql ="SELECT DISTINCT CAST(MR_ID AS INT) AS MR_ID FROM Table_Name";
$sql_one ="SELECT CAST(Supp_ID AS INT) AS Supp_ID FROM Table_Name";

$users = $dbh->query($sql);
$users_one = $dbh->query($sql_one);

HTML / PHP：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    <!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
    <option selected value="select">Choose a MR_ID</option>
        <?php foreach($users->fetchAll() as $user) { ?>
            <option data-name="<?php echo $user['MR_ID'];?>">
                <?php echo $user['MR_ID'];?>
            </option>
        <?php } ?>
    </select>
</form>

<!-- Table -->
<p>
   
        <table border="1" id="index_table" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header">
                <td>MR ID</td>
                <td>Supplier ID</td>
                <td>Edit</td>
                </tr>
            </thead>
            <?php foreach($users_one->fetchAll() as $supp) { ?>
            <tr>
                <td class="mr_id"></td>
                <td class="supp_id"><?php echo $supp['Supp_ID']?></td>
                <td><input type="button" class="edit" name="edit" value="Edit">
            </tr>
            <?php } ?>
        </table>

此JavaScript代码读取下拉列表中选择的内容，但这就是它所做的工作的范围。

1
2
3
4
5
6
function updatetable(myForm) {

    var selIndex = myForm.master_dropdown.selectedIndex;
    var selName = myForm.master_dropdown.options[selIndex].text;
    document.getElementById("dropdown_selection").innerHTML = String(selName);
}
相关讨论

ajax应该看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax ({
    url:"table_drawing.php",
    method:"get", //can be post or get, up to you
    data: {
        mr_id : mr_id    
    },
    beforeSend: function () {
        //Might want to delete table and put a loading screen, otherwise ignore this
        // $("#table_div").html(loading_screen);
    },
    success: function(data){
        $("#table_div").html(data); // table_div is the div you're going to put the table into, and 'data' is the table itself.
    }
});

在table_drawing.php中，您将根据mr_id的输入绘制表格。

相关讨论