根据下拉选择自动显示数据
[英]Automatically show data based on dropdown selection
问题描述
Basically, I have a table with two column: 'Kode Barang' (Item ID) and 'Nama Barang' (Name of Item). 
基本上，我有一个包含两列的表：“ Kode Barang”（项目ID）和“ Nama Barang”（项目名称）。 The first column is a dropdown option which it's data get populated dynamically from another table. 第一列是一个下拉选项，它的数据是从另一个表动态填充的。 If a user select an Item ID, then the second column will automatically show the name of the item. 如果用户选择项目ID，则第二列将自动显示该项目的名称。
Let's say that I've only two row as this code below: 假设我只有两行，如下所示：
<HTML>
<table id="theTable" border="1">
<thead>
<tr>
<th> Kode Barang </th>
<th> Nama Barang </th>
<tr>
</thead>
<tbody>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
<tr>
<td type="text" name="kode_barang" id="kode_barang"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("skripsi_1");
$result = mysql_query("select * from input_data_barang");
$jsArray = "var kode_barang = new Array();\n";
echo '<select name="kode_barang" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['kode_barang'] . '">' . $row['kode_barang'] . '</option>';
$jsArray .= "kode_barang['" . $row['kode_barang'] . "'] = {name:'" . addslashes($row['nama_barang']) . "',desc:'".addslashes($row['nama_barang'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="nama_barang" id="nama_barang"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
};
</script>
</td>
</tr>
</table>
</HTML>
The first row works perfectly. 第一行工作完美。 The problem is in the second row. 问题在第二行。 If I select an option from the dropdown, then name of the item doesn't appear in the second row, but appear in the first row instead. 如果我从下拉列表中选择一个选项，则该项目的名称不会出现在第二行中，而是出现在第一行中。 Would anybody please show me how to fix this? 有人可以告诉我如何解决此问题吗？ Thank you. 谢谢。
1 个解决方案
解决方案1
1 已采纳 2017-11-05 09:33:38
You are appending your values using: 您将使用以下方法附加值：
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
The problem is, that there is an Element with the ID kode_barang/nama_barang in BOTH rows. 问题是，在两行中都有一个ID为kode_barang / nama_barang的元素。 So you have 2 Elements for the ID's. 因此，您有2个ID元素。 Javascript appereantly just decides only to take the first one. Java语言仅决定只采用第一个。 Just rename them in the second row to "kode_barang2" and "nama_barang2" and when setting the values change the names too: 只需将它们在第二行中重命名为“ kode_barang2”和“ nama_barang2”，并在设置值时也更改名称：
document.getElementById('kode_barang2').value = kode_barang[id].name;
document.getElementById('nama_barang2').value = kode_barang[id].desc;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.