下拉選擇后如何使用從 mysql 表中獲取的數據填充多個文本框

Question

在下拉選擇后，我想用從 mysql 表中獲取的數據填充多個文本框。 我看到了這個jsfiddle 演示並且工作正常，但我需要一些不同的東西。 我有以下情況：

<div class="form-group">                            
    <label class="control-label col-sm-2" for="pn_dn">Pn_DN:</label>
    <div class="col-sm-4">
        <select id="pn_dn" name="pn_dn" required>
            <option value="">Seleziona</option>
                <?php 
                    $sql = "SELECT codice, cod_forn, descrizione, package, u_m FROM maglab";
                    $result = $conn->query($sql);
                    if ($result->num_rows > 0) {                                    
                        while($row = $result->fetch_assoc()) {
                            $pn_dn = $row['codice'];
                            $descrizione = $row['descrizione'];
                            $pn_manufacturer = $row['cod_forn'];
                            $package = $row['package'];
                            $u_m = $row['u_m'];
                ?>                                                  
                <option><?php echo $pn_dn; ?></option>
                    <?php } ?>                                                  
            </select>                                   
        </div>
            <?php } ?>
        <label class="control-label col-sm-2" for="description">Descrizione:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="description" name="description" style="width: 100%;"> </textarea>
        </div>                                      
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width: 100%;"> </textarea>
        </div>
        <label class="control-label col-sm-2" for="manufacturer">Fornitore:</label>
        <div class="col-sm-4">
            <textarea class="form-control" rows="3" id="manufacturer" name="manufacturer" style="width: 100%;"> </textarea>
        </div>                              
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="package">Package:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="package" name="package"> </div>
        <label class="control-label col-sm-2" for="u_m">Unità di misura:</label>
        <div class="col-sm-4">
            <input type="u_m" class="form-control" id="u_m" name="u_m" required>
        </div>                          
    </div>

<script type="text/javascript">
    var pn_dn = document.getElementById('pn_dn');
    //var pn_manufacturer = document.getElementById('<?php echo json_encode($pn_manufacturer); ?>');

    pn_dn.onchange = function(){
        //document.getElementById("pn_manufacturer").innerHTML = '<?php echo json_encode($pn_manufacturer); ?>';
        pn_manufacturer.value = this.value;
        description.value = this.value;
        package.value = this.value;
        u_m.value = this.value;
    }
</script>   

使用上面的 JS，所有輸入框都填充了 pn_dn 值，但是當我從 maglab 表中獲取 $pn_dn、$descrizione、$pn_manufacturer、$package 和 $u_m 時，我想用 $descrizione、$pn_manufacturer、$ 填充輸入框package 和 $u_m 基於 $pn_dn 選擇。 JS如何修改？

Answer 1

您可以使用自定義屬性，在此您可以為各種字段分配所需的值。即：

<select id="pn_dn" name="pn_dn" required>
  <option value="">Seleziona</option>
  <?php 
         //your othercodes
         ?>
         <!--use data--attr-->
  <option descrizione='<?php echo $descrizione; ?>' pn_manufacturer='<?php echo $pn_manufacturer; ?>' package='<?php echo $package; ?>' u_m='<?php echo $package; ?>'>
    <?php echo $pn_dn; ?>
  </option>
  <?php } ?>
</select>

演示代碼：

 var pn_dn = document.getElementById('pn_dn'); pn_dn.onchange = function() { //get select-index var slected_index = this.options[this.selectedIndex] //use getAttribute to get custom attribute document.getElementById("pn_manufacturer").value = slected_index.getAttribute("pn_manufacturer"); document.getElementById("package").value = slected_index.getAttribute("package"); document.getElementById("u_m").value = slected_index.getAttribute("u_m"); document.getElementById("description").value = slected_index.getAttribute("descrizione"); }

 <select id="pn_dn" name="pn_dn" required> <option value="">Seleziona</option> <.--use attr--> <option descrizione='A' pn_manufacturer='Ab' package='2' u_m='1'> Something.. </option> <option descrizione='B' pn_manufacturer='Bb' package='5' u_m='5'> Something2.: </option> </select> <label class="control-label col-sm-2" for="description">Descrizione:</label> <div class="col-sm-4"> <textarea class="form-control" rows="3" id="description" name="description" style="width; 100%:"> </textarea> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pn_manufacturer">Pn_Fornitore:</label> <div class="col-sm-4"> <textarea class="form-control" rows="3" id="pn_manufacturer" name="pn_manufacturer" style="width; 100%:"> </textarea> </div> <div class="form-group"> <label class="control-label col-sm-2" for="package">Package:</label> <div class="col-sm-4"> <input type="text" class="form-control" id="package" name="package"> </div> <label class="control-label col-sm-2" for="u_m">Unità di misura:</label> <div class="col-sm-4"> <input type="u_m" class="form-control" id="u_m" name="u_m" required> </div> </div>