根据下拉选择自动显示数据答案

【问题标题】：Automatically show data based on dropdown selection根据下拉选择自动显示数据
【发布时间】：2017-11-05 09:29:05
【问题描述】：

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

第一行完美运行。问题在第二行。如果我从下拉列表中选择一个选项，则项目名称不会出现在第二行，而是出现在第一行。有人可以告诉我如何解决这个问题吗？谢谢。

【问题讨论】：

mysql_* api 函数已弃用 - 您应该将代码升级到 mysqli 或 PDO

标签： javascript php

【解决方案1】：

您正在使用以下方式附加您的值：

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 appereantly 只是决定只采用第一个。只需将第二行中的它们重命名为“kode_barang2”和“nama_barang2”，并在设置值时也更改名称：

document.getElementById('kode_barang2').value = kode_barang[id].name;
document.getElementById('nama_barang2').value = kode_barang[id].desc;

【讨论】：

我试过了，但问题反过来了。第二行完美，第一行不行。如果我从第一行中选择一个选项，则名称会出现在第二行中。
好的，第二个问题是你有 2 个函数，它们都被称为 changeValue(id)。你不能那样做！将第二个重命名为 changeValue2(id)，当然还要更改调用
你的意思是这样的：function changeValue2(id){ document.getElementById('kode_barang2').value[2] = kode_barang[id].name; document.getElementById('nama_barang2').value[2] = kode_barang[id].desc;对不起，我是菜鸟。
这样，问题又回到了第一个。项目名称仅出现在第一行。
不要替换id，这没有任何意义。你在哪里调用你的 change-Value 函数？