如何使用 Ajax function 使用 JQuery 更新每個 div 元素

Question

我是 JQuery 的新手，我有一個 Ajax function 來更新select選項。 Ajax 在我的第一個分區上運行良好。 但是當我克隆 div 並運行 Ajax 再次調用它時，只更新第一個 Div 元素，而不是克隆的元素。 我是壁櫥的新手......等請幫助我，所以當我調用 Ajax 時，它將更新克隆的 div（當前 div）元素。

這是我的 ajax function：

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">&nbsp;
                </div>
            </div>
        </div>
    </div>
</div>
 </form>
  {% endblock %}

Answer 1

 {#$("#id_accountcode").append($('<option/>', {#}
              value: item1.AcctCode,
              text: item1.AcctName

我做了如下改變：

 $("table tbody select[name=acct_code]").append($('<option/>',

所有 div 選擇都使用選項進行更新 - 感謝 swathi。