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

我创建了如下所示的 GUI：在此处输入图像描述

这部分的代码是：

<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><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ërbimin</option>
<?php
$service = new AdminLibService();
$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ë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>

表的行是使用 javascript 动态生成的，生成行的代码如下所示：

function addnewrow()
{
vartr = '<tr>'+
'<td><?php
echo '<select id="sh"  name="service[]" class="form-control sherbimi" aria-describedby="llojisherbimit" required>';
echo '<option selected="selected" value=""> Zgjedh opsionin </option>';
$service = new AdminLibService();
$services=$service->find_all();
foreach ($services as $s){
echo '<option value="'.$s->id .'"  class="sale-select" selected="selected"> '
.$s->service_name. '</option>';
}
echo '</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>'+
'</tr>';
$('.detail').append(vartr);
}

我使用 php 用表中的数据填充选择框。我正在尝试做的是在选择框中选择该选项的同时获取指定服务(Sherbimet(的数据，并在指定行的输入中显示这些数据(行是动态创建的(。我已经为第一行完成了此操作，数据显示良好，但是对于其他行，它正在更改具有相同数据的所有行的所有输入的结果。其代码如下所示：

$(document).ready(function() {
$(document).on('change','#sh',function(e){
e.preventDefault();
var empid = $(this).val();

$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
cache: false,
success: function(data) {

var a= data.description;
var b=data.price;
$('input[name="description[]"]').val(a);
$('input[name="price[]"]').val(b);
}
});

}(; });

首先，尝试使用反引号 (''( 清理 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代码用于准备函数的结果。
您的代码的问题在于您没有传递正在更改的某些elemenet，而是尝试选择元素通过类选择器，该元素始终默认为第一个选择器相反，您需要做的是：

在 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);
}

然后填充数据功能：

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);
}
});
}

相关内容

最新更新

热门标签：