【发布时间】：2021-07-31 22:24:42
【问题描述】：
我是 JQuery 新手，我有一个 Ajax 函数来更新 select 选项。 Ajax 在我的第一个 Div 上运行良好。但是当我克隆 div 并运行 Ajax 时，再次调用它只更新第一个 Div 元素，而不是克隆的元素。我是壁橱的新手……等等。请帮助我，这样当我调用 Ajax 时，它会更新克隆的 div(current div) 元素。
这是我的 ajax 函数：
function acct_dbox() {
{#var that = $(this)#}
$.ajax(
{
type: "GET",
url: "/waccounts/getaccounts",
dataType: "json",
data: {
{#'acctlevel': $(this).val(),#}
'csrfmiddlewaretoken': '{{csrf_token}}'
},
success: function (data) {
$.each(data, function(index, item) {
if (item.length > 0){
console.log('test', item[0].AcctCode);
console.log('test', item[0].AcctName);
{#$("#id_accountcode option").remove();#}
$.each(item, function(index1, item1) {
console.log(item1.id);
console.log(item1.AcctCode);
console.log(item1.AcctName);
$("#id_accountcode").append($('<option/>',{
{#$("#id_accountcode").append($('<option/>', {#}
value: item1.AcctCode,
text: item1.AcctName
}));
})
$( document ).ready(function() {
acct_dbox();
var original_external_int_div = document.getElementById('account_list');
//Div to Clone
var clone = original_external_int_div.cloneNode(true); // "deep" clone
original_external_int_div.parentNode.append(clone);
acct_dbox(); # (it is updating the first div again - not cloned one)
});
我的html是：
{% extends 'wstore_base_generic.html' %}
{% block content %}
<form action="" method="post" class="w-auto" id="new_trans_form"
xmlns:width="http://www.w3.org/1999/xhtml">
<div class="row mt-1 mb-4" >
<div class="col-md-12">
<div>
<div class="headerctr">
<h3>JV</h3>
<!-- <div> -->
<!-- <h3 > -->
<!-- </h3> -->
</div>
<div class="card-body" >
{% csrf_token %}
<div 38rem class="row style= width:18">
<div class="col">
<label>Transaction Date</label>
<input type="date" class="form-control" name="
{{form.fh_dt.name}}" value="{{current_date}}"
readonly>
{% if form.fh_dt.errors %}
{% for error in form.fh_dt.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col-sm" >
<label>Transaction Number</label>
<input type="number" class="form-control" name="
{{form.fh_no.name}}"
value="{{transaction_number}}" readonly>
{% if form.fh_no.errors %}
{% for error in form.fh_no.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<input type="hidden" class="form-control" name="
{{form.fh_type.name}}" required readonly
value="JV">
{% if form.fh_type.errors %}
{% for error in form.fh_type.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
<label>Transaction Ref.</label>
<input type="text" class="form-control" name="
{{form.fh_ref.name}}" required
value="Ref.">
{% if form.fh_ref.errors %}
{% for error in form.fh_ref.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
<div class="row mt-0">
<div class="col">
<label>Transaction Code</label>
<input type="text" class="form-control" name="
{{form.fh_code.name}}" required readonly
value="JV">
{% if form.fh_code.errors %}
{% for error in form.fh_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction Detail</label>
<input type="text" class="form-control" name="
{{form.fh_detail.name}}" required
value="Detail">
{% if form.fh_detail.errors %}
{% for error in form.fh_detail.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
<div class="col">
<label>Transaction UserCode</label>
<input type="text" class="form-control" name="
{{form.fh_user_code.name}}" required
value="{% if form.fh_user_code.value %}
{{form.fh_user_code.value}}{% else %}{{request.user.username}}{% endif %}">
{% if form.fh_user_code.errors %}
{% for error in fh_user_code.errors %}
<small class="text-danger">{{error}}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mt-0">
<div class="card shadow">
<div class="card-header text-center">
<h3 class="headerctr">
Item Details
</h3>
</div>
<div class="card-body">
{% csrf_token %}
<table class="">
<thead class="thead-light">
<tr>
<th>Code</th>
<th class = "text-danger">Account</th>
<th class = "text-danger">Debits</th>
<th class="text-success">Credits</th>
<th class = "text-warning">Description</th>
<th class = "text-warning">Tax</th>
</tr>
</thead>
<tbody id="account_list" style="margin-bottom: 0">
<tr>
<td>
<select name="acct_code" class="form-control
fh_code" id="id_accountcode">
<option value="SELECT"
selected="selected">---SELECT---</option>
required></select>
</td>
<td>
<input type="text" name="acct_name"
class="form-control fh_name"
placeholder="Acct Code" readonly>
</td>
<td>
<input type="number" name="acct_debit"
class="form-control fh_debit"
placeholder=" " >
</td>
<td>
<input type="number" class="form-control
fh_credit" name="acct_credit"
placeholder=" ">
</td>
<td>
<input type="text" class="form-control
fh_detail" placeholder="Description"
name="acct_descript" >
</td>
<td>
<input type="number" class="form-control
fh_tax" name="acct_tax"
placeholder=" ">
</td>
<td>
<div class="btn-group">
<button type="button" id="btnadd"
class="btn add_new_row" title="Add">
<i class="fas fa-plus-square"></i>
</button>
<button type="button" class="btn
delete_row" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td class = "text-success">Total Quantity:
<strong id="final_quantity">0</strong></td>
<td></td>
<td class = "text-success"> Total Price: <strong
id="final_price">0</strong></td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12 mb-1">
<div class="btn-group">
<a href="{% url 'transactions' transtype='INV'
posted='ALL' %}" class="btn btn-info mr-2" >Cancel</a>
<input type="submit" class="btn btn-info submit_form"
name="save_next" value="Save&Print">
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
【问题讨论】：
-
同时显示 html。
-
html 已添加到我的问题中。谢谢。
-
你正在克隆 tbody ？此外，会有多个具有相同 id 的元素，这就是为什么只有第一个有效。
-
看看这个
$("table tbody:last select[name=acct_code]").append(youroptionsto appendhere)是否有效。另外，请删除所有重复的 id。 -
它只更新了最后一个选择；我做了如下更改： $("table tbody select[name=acct_code]").append($('',{... 删除 --last-- 它更新所有行。请给出更正的答案标记“答案”谢谢
标签： javascript html django ajax