![](/img/trans.png)
[英]Javascript to dynamically display JSON data based on two dropdown selections in HTML
[英]Display Database Values on Different HTML Dropdown Selections
我有一個下拉列表,該列表與數據庫表中的數據一起導入。 根據選擇的內容,我想顯示一個表,該表顯示與下拉列表中選擇的數字相關的必要信息。 因此,例如,如果我在下拉列表中選擇MR_ID為1,則我希望Supp_ID值(可以大於1個值)顯示在表中。 我怎樣才能做到這一點?
該表只有2列,即MR_ID(下拉列表中顯示的內容)和Supp_ID。
這是我用於foreach循環的查詢,到目前為止我的HTML / PHP,還有一些JavaScript
$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:
<!-- 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>
<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>
<?php foreach($users_one->fetchAll() as $supp) { ?>
<tr>
<td class="mr_id"><div id="dropdown_selection"></div></td>
<td class="supp_id"><?php echo $supp['Supp_ID']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
</tr>
<?php } ?>
</table>
</div>
此JavaScript代碼讀取下拉列表中選擇的內容,但這就是它所做的工作的程度。
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應該看起來像這樣:
$.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的輸入繪制表格。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.