根据下拉列表选择显示HTML表

时间:2016-12-08 14:57:37

标签: javascript php html onchange

我有一个下拉列表,该列表使用数据库中的表中的数据导入。根据所选内容,我想显示某个表格,该表格显示与下拉列表中所选内容相关的必要信息。我怎么能这样做?

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

这是我到目前为止的HTML / PHP,后面还有一些JavaScript。

<!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id" onChange="updatetable();">
    <option value="">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 endforeach; ?>
    </select>

<!-- Table -->
<p> 
    <div id="table_div">
        <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>
            <tr>
                <td class="mr_id"><?php echo $user['MR_ID'];?></td>
                <?php foreach($users_one->fetchAll() as $supp); ?>
                <td class="supp_id"><?php echo $supp['Supp_ID'];?></td>
                <td><input type="button" class="edit" name="edit" value="Edit">
            </tr>
        </table>
    </div>

JavaScript的:

function updatetable() {
    var e = document.getElementById("mr_id");
    var itemSelected = e.options[e.selectedIndex];

    document.getElementById("table_div").value = itemSelected.dataset.name;
}

表格的小样本大小:

enter image description here

0 个答案:

没有答案