在选择框中选择选项时填充使用 jquery 动态生成的输入

Question

我创建了如下所示的 GUI： 

这部分的代码是：

<table class="table table-responsive table-bordered table-hover">

   <thead>

      <th>Sh&euml;rbimi</th>

      <th>P&euml;rshkrimi</th>

      <th>Nj&euml;sia</th>

      <th>&Ccedil;mimi</th>

      <th>Sasia</th>

      <th>Total</th>

      <th><input type="button" value="+" id="add" class="btn btn-primary"></th>

   </thead>

   <tbody class="detail">

      <tr>

         <td width="25%">

            <select name="service[]" id="sh" class="form-control sherbimi"  aria-describedby="llojisherbimit" required>

               <option selected="selected" value="">Zgjedh Sh&euml;rbimin</option>

               <?php

                  $service = new \Admin\Lib\Service();

                  $services=$service->find_all();

                  foreach ($services as $s){

                      echo "<option value='".$s->id ."'  class='sale-select' selected='selected'> "

                          .$s->service_name . "</option>";   

                  }

                  ?>

            </select>

            <div class="invalid-feedback">

               Ju lutem plot&euml;soni sh&euml;rbimin.

            </div>

         </td>

         <td width="30%" >

            <input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >

            <div class="invalid-feedback">

               Ju lutem plot&euml;soni p&euml;rshkrimin.

            </div>

         </td>

         <td width="15%">

            <select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>

               <option value="">Zgjedh Nj&euml;sin</option>

               <option value='cope'> Cop&euml; </option>

               <option value='dite'> Dit&euml; </option>

            </select>

Answer 1

首先尝试使用反引号（``）来清理 javascript 中的 html 代码以进行注释&nbsp; &nbsp; &nbsp; &nbsp; function addNewRow() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tableRow = `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onchange="fillData(this)"&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="service[]"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="form-control sherbimi"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="llojisherbimit" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option selected="selected" value=""> Zgjedh opsionin </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5" class="sale-select">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="unit[]" class="form-control unit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Zgjidh Njësine </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="cope"> Copë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="dite">Ditë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="cmimi"&nbsp; class="form-control price" name="price[]" required></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" class="form-control quantity" name="quantity[] required"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" class="form-control amount" name="amount[]" required></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.detail').append(tableRow);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;对函数和变量使用正确的命名语法，例如 addnewrow 到 addNewRow，始终使用var,const或声明变量let。php 代码的结果存储在 javascript 变量中，因为 php 代码只会在服务器端执行，如果您需要 php 的动态内容，您应该使用 ajax，否则它将无法工作。在你的例子中，它作为 php 工作，它回显将用于准备函数结果的 html 代码。您的代码的问题是您没有传递正在更改的某些元素，而是尝试通过类选择器选择元素，该选择器始终默认为第一个选择器，而不是您需要做的是：在 html 方面，使用如下参数调用函数 fillData this：&nbsp;<table class="table table-responsive table-bordered table-hover">&nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Shërbimi</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Përshkrimi</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Njësia</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Çmimi</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Sasia</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Total</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button id="add" class="btn btn-primary" onclick="addNewRow()">+</button></th>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody class="detail">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="25%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<select name="service[]" onchange="fillData(this)" class="form-control sherbimi"&nbsp; aria-describedby="llojisherbimit" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option selected="selected" value="" disabled="disabled">Zgjedh Shërbimin</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='1'&nbsp; class='sale-select'>1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='2'&nbsp; class='sale-select'>2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='3'&nbsp; class='sale-select'>3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni shërbimin.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="30%" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni përshkrimin.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="15%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Zgjedh Njësin</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='cope'> Copë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value='dite'> Ditë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni njësin.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="10%"&nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" id="cmimi"&nbsp; class="form-control price" name="price[]" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni çmimin.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="10%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" class="form-control quantity" name="quantity[]" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni sasinë.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="10%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="text" class="form-control amount" name="amount[]" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="invalid-feedback">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ju lutem plotësoni totalin.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><strong>x</strong></span></a> -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tfoot>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th style="text-align:center;" class="total">0<b></b></th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th></th>&nbsp; &nbsp; &nbsp; &nbsp; </tfoot>&nbsp; &nbsp; &nbsp;</table>还要更改 addNewRow 函数，使其包含此变量（不要忘记使用您的版本，因为我从此处删除了 php 内容）：&nbsp; &nbsp; function addNewRow() {&nbsp; &nbsp; &nbsp; &nbsp; var tableRow = `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onchange="fillData(this)"&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="service[]"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="form-control sherbimi"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="llojisherbimit" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option selected="selected" value=""> Zgjedh opsionin </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="5" class="sale-select">5</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select name="unit[]" class="form-control unit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Zgjidh Njësine </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="cope"> Copë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="dite">Ditë </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="cmimi"&nbsp; class="form-control price" name="price[]" required></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" class="form-control quantity" name="quantity[] required"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" class="form-control amount" name="amount[]" required></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; `&nbsp; &nbsp; &nbsp; &nbsp; $('.detail').append(tableRow);&nbsp; &nbsp; }然后是 filldata 函数：&nbsp; &nbsp; &nbsp;function fillData(element) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var empid = element.value&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;url: 'sale_data.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dataType: "JSON",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data: 'empid='+ empid,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('input[name="description[]"]').val(data.description);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('input[name="price[]"]').val(data.price);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;}