基本上，我有一个包含两列的表格:“Kode Barang”(项目 ID)和“Nama Barang”(项目名称)。第一列是一个下拉选项，它的数据从另一个表动态填充。如果用户选择一个项目 ID，那么第二列将自动显示该项目的名称。
假设我只有两行，如下代码所示:
<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>
第一行工作完美。问题出在第二行。如果我从下拉列表中选择一个选项，则该项目的名称不会出现在第二行中，而是出现在第一行中。有人可以告诉我如何解决这个问题吗？谢谢。
最佳答案
您正在使用以下方式附加您的值:
document.getElementById('kode_barang').value = kode_barang[id].name;
document.getElementById('nama_barang').value = kode_barang[id].desc;
问题是，两行中都有 ID 为 kode_barang/nama_barang 的元素。所以你有 2 个 ID 元素。 Javascript 显然只是决定只采用第一个。只需将第二行中的它们重命名为“kode_barang2”和“nama_barang2”，并在设置值时也更改名称:
document.getElementById('kode_barang2').value = kode_barang[id].name;
document.getElementById('nama_barang2').value = kode_barang[id].desc;
关于javascript - 根据下拉选择自动显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47120047/