在选择框中选择选项时填充使用 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 代码以进行注释

        function addNewRow() {

            var tableRow = `

                <tr>

                    <td>

                        <select 

                            onchange="fillData(this)"  

                            name="service[]" 

                            class="form-control sherbimi" 

                            aria-describedby="llojisherbimit" required>

                            <option selected="selected" value=""> Zgjedh opsionin </option>

                            <option value="5" class="sale-select">5</option>

                        </select>

                    </td>

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

                    <td>

                        <select name="unit[]" class="form-control unit">

                            <option value="">Zgjidh Njësine </option>

                            <option value="cope"> Copë </option>

                            <option value="dite">Ditë </option>

                        </select>

                    </td>

                    <td><input type="text" id="cmimi"  class="form-control price" name="price[]" required></td>

                    <td><input type="text" class="form-control quantity" name="quantity[] required"></td>

                    <td><input type="text" class="form-control amount" name="amount[]" required></td>

                    <td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>

                </tr>

            `

            $('.detail').append(tableRow);

        }

    

    

    

对函数和变量使用正确的命名语法，例如 addnewrow 到 addNewRow，始终使用var,const或声明变量let。

php 代码的结果存储在 javascript 变量中，因为 php 代码只会在服务器端执行，如果您需要 php 的动态内容，您应该使用 ajax，否则它将无法工作。在你的例子中，它作为 php 工作，它回显将用于准备函数结果的 html 代码。

您的代码的问题是您没有传递正在更改的某些元素，而是尝试通过类选择器选择元素，该选择器始终默认为第一个选择器，而不是您需要做的是：

在 html 方面，使用如下参数调用函数 fillData this：

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

        <thead>

           <th>Shërbimi</th>

           <th>Përshkrimi</th>

           <th>Njësia</th>

           <th>Çmimi</th>

           <th>Sasia</th>

           <th>Total</th>

           <th>

             <button id="add" class="btn btn-primary" onclick="addNewRow()">+</button></th>

        </thead>

        <tbody class="detail">

           <tr>

              <td width="25%">

                 <select name="service[]" onchange="fillData(this)" class="form-control sherbimi"  aria-describedby="llojisherbimit" required>

                    <option selected="selected" value="" disabled="disabled">Zgjedh Shërbimin</option>

                    <option value='1'  class='sale-select'>1</option>

                    <option value='2'  class='sale-select'>2</option>

                    <option value='3'  class='sale-select'>3</option>

                 </select>

                 <div class="invalid-feedback">

                    Ju lutem plotësoni shë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ësoni përshkrimin.

                 </div>

              </td>

              <td width="15%">

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

                    <option value="">Zgjedh Njësin</option>

                    <option value='cope'> Copë </option>

                    <option value='dite'> Ditë </option>

                 </select>

                 <div class="invalid-feedback">

                    Ju lutem plotësoni njësin.

                 </div>

              </td>

              <td width="10%"  >

                 <input type="text" id="cmimi"  class="form-control price" name="price[]" required>

                 <div class="invalid-feedback">

                    Ju lutem plotësoni çmimin.

                 </div>

              </td>

              <td width="10%">

                 <input type="text" class="form-control quantity" name="quantity[]" required>

                 <div class="invalid-feedback">

                    Ju lutem plotësoni sasinë.

                 </div>

              </td>

              <td width="10%">

                 <input type="text" class="form-control amount" name="amount[]" required>

                 <div class="invalid-feedback">

                    Ju lutem plotësoni totalin.

                 </div>

              </td>

              <td>

                 <!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">

                    <span><strong>x</strong></span></a> -->

              </td>

           </tr>

        </tbody>

        <tfoot>

           <th></th>

           <th></th>

           <th></th>

           <th></th>

           <th></th>

           <th style="text-align:center;" class="total">0<b></b></th>

           <th></th>

        </tfoot>

     </table>

还要更改 addNewRow 函数，使其包含此变量（不要忘记使用您的版本，因为我从此处删除了 php 内容）：

    function addNewRow() {

        var tableRow = `

            <tr>

                <td>

                    <select 

                        onchange="fillData(this)"  

                        name="service[]" 

                        class="form-control sherbimi" 

                        aria-describedby="llojisherbimit" required>

                        <option selected="selected" value=""> Zgjedh opsionin </option>

                        <option value="5" class="sale-select">5</option>

                    </select>

                </td>

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

                <td>

                    <select name="unit[]" class="form-control unit">

                        <option value="">Zgjidh Njësine </option>

                        <option value="cope"> Copë </option>

                        <option value="dite">Ditë </option>

                    </select>

                </td>

                <td><input type="text" id="cmimi"  class="form-control price" name="price[]" required></td>

                <td><input type="text" class="form-control quantity" name="quantity[] required"></td>

                <td><input type="text" class="form-control amount" name="amount[]" required></td>

                <td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>

            </tr>

        `

        $('.detail').append(tableRow);

    }

然后是 filldata 函数：

     function fillData(element) {

             var empid = element.value

             $.ajax({

                 method:"POST",

                 url: 'sale_data.php',

                 dataType: "JSON",

                 data: 'empid='+ empid,

                 success: function(data) {

                     $('input[name="description[]"]').val(data.description);

                     $('input[name="price[]"]').val(data.price);

                 }

         });

     }