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

时间:2017-11-05 09:29:06

标签: javascript php

基本上,我有一个有两列的表:'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> 

第一行完美无缺。问题出在第二行。如果我从下拉列表中选择一个选项,则该项目的名称不会显示在第二行中,而是显示在第一行中。有人请告诉我如何解决这个问题吗?谢谢。

1 个答案:

答案 0 :(得分:1)

您使用以下方法追加您的值:

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

问题是,在BOTH行中有一个ID为kode_barang / nama_barang的元素。所以你有两个ID元素。 Javascript似乎只决定采取第一个。只需将它们在第二行重命名为“kode_barang2”和“nama_barang2”,当设置值时也会更改名称:

s1flat = [x for sublist in s1 for x in sublist]
s2flat = [x for sublist in s2 for x in sublist]

new_pair = list(set(s2flat) - set(s1flat))