gpt4 book ai didi

javascript - 根据下拉选择自动显示数据

转载 作者:行者123 更新时间:2023-12-03 03:07:06 27 4
gpt4 key购买 nike

基本上,我有一个包含两列的表格:“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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com