下拉选择后如何使用从mysql表中获取的数据填充多个文本框

Question

我想在下拉选择后用从 mysql 表中获取的数据填充多个文本框。我看到了这个jsfiddle demo 并且工作正常，但我需要一些不同的东西。我有以下情况：

<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>