javascript - 当超过 1 个 div 附加时，我从数据库中检索的下拉选项会增加

Question

在 2 div append 之前，我的下拉列表如下所示：

但是，一旦我单击按钮附加另一个 div，它看起来像这样：

这是我在html中的按钮代码：

    <div class="productDiv"></div>
    <div class="mt-3 text-center"><button class="btn profile-button" style="color: white" 
    type="button" id="btnAddtoList">পণ্য যোগ করুন</button></div>

和jQuery代码：

    $(function() {
    let divCount = 0;
     $('#btnAddtoList').on('click', function(){
     divCount++;
     const div_title = divCount;
     var newDiv = $(
     `<div class=item-wrapper-${div_title}>` +
     '<div class="container rounded bg-white mt-3 mb-3">' +
      '<div class="row">' +
       '<div class="col-md-12">' +
        '<div class="row mt-3">' +
          '<span><strong>পণ্যের বিবরণ #</strong></span>'+ div_title +
         </div>' +
         '<div class="row mt-1">' +
           '<select class="product_option form-control" id="product" data-search="true">' +
              '<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- </option>' +
           '</select>' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">পণ্যের নাম&lt;/label><input type="text" 
           class="form-control" id="productName">' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">বিক্রয় মূল্য&lt;/label><input type="text" 
           class="form-control" id="sellPrice">' +
         '</div>' +
         '<div class="row mt-3">' +
          '<label class="labels" style="font-size: 16px">পরিমাণ</label><input type="number" 
           class="form-control" id="amount">' +
         '</div>' +
         '<div class="mt-3 d-flex flex-column align-items-center text-center">
           <button class="btn btn-danger deleteItem" type="button">মুছুন&lt;/button></div>' +
         '</div>' +
        '</div>' +
       '</div>' +
      '</div>');
      $('.productDiv').append(newDiv);
      console.log(div_title);
      firebase.auth().onAuthStateChanged(function(user) {
      console.log(user);
       if (user) {
          var user_id = user.uid;          
          firebase.database().ref('Products/').child(user_id).once('value')
          .then(function(snapshot){
             snapshot.forEach(function(childSnapshot) {
               var product_name = childSnapshot.child("product_name").val();
               var buying_price = childSnapshot.child("buying_price").val();
               var selling_price = childSnapshot.child("selling_price").val();
               var total = product_name + " | " + selling_price;
               console.log(total);
               $(".product_option").append('<option>' + total + '</option');
               $(document).on("change", ".product_option", function () {
                 const valArr = $(`.item-wrapper-${div_title} .product_option 
                  option:selected`).text().split(" | ");
                 console.log(valArr);
                 $(`div.item-wrapper-${div_title} #productName`).val(valArr[0]);
                 $(`div.item-wrapper-${div_title} #sellPrice`).val(valArr[1]);
                 });
               $(document).on("click", ".deleteItem", function() {
                 $(this).closest(`.item-wrapper-${div_title}`).remove();
                       });
                   });
               })
                 }
                else{
                    window.location.href="{% url 'login' %}";
                }
            });
        });
    });

这是我的代码，首先我为一些孟加拉语词道歉。这些只是标签名称。id 和类名是用英文写的。提前致谢。

标签： javascriptjquery

Answer 1

您正在使用 $(".product_option") 它将针对该类的所有选择并将新选项附加到它，这就是您看到重复的原因。相反，您可以使用$(".item-wrapper-" + div_title).find(..它来找到需要添加选项的选择框。

演示代码：

$(function() {
  let divCount = 0;
  $('#btnAddtoList').on('click', function() {
    divCount++;
    const div_title = divCount;
    var newDiv = $(
      `<div class=item-wrapper-${div_title}>` +
      '<div class="container rounded bg-white mt-3 mb-3">' +
      '<div class="row">' +
      '<div class="col-md-12">' +
      '<div class="row mt-3">' +
      '<span><strong>পণ্যের বিবরণ #</strong></span>' + div_title +
      '</div>' +
      '<div class="row mt-1">' +
      '<select class="product_option form-control" id="product" data-search="true">' +
      '<option disabled selected> -- পণ্য পছন্দ করুন (পণ্যের নাম | বিক্রয় মূল্য) -- </option>' +
      '</select>' +
      '</div>' +
      '<div class="row mt-3">' +
      '<label class="labels" style="font-size: 16px">পণ্যের নাম&lt;/label><input type="text"  class = "form-control" id = "productName" > ' +
      '</div>' +
      '<div class="row mt-3">' +
      '<label class="labels" style="font-size: 16px">বিক্রয় মূল্য&lt;/label><input type="text"  class = "form-control" id = "sellPrice" > ' +
      '</div>' +
      '<div class="row mt-3">' +
      '<label class="labels" style="font-size: 16px">পরিমাণ</label><input type="number" class = "form-control"id = "amount" > ' +
      '</div>' +
      '<div class="mt-3 d-flex flex-column align-items-center text-center"> <button class = "btn btn-danger deleteItem" type = "button"> মুছুন </button></div > ' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>');
    $('.productDiv').append(newDiv);
    /* firebase.auth().onAuthStateChanged(function(user) {
       console.log(user);
       if (user) {
         var user_id = user.uid;
         firebase.database().ref('Products/').child(user_id).once('value')
           .then(function(snapshot) {
             snapshot.forEach(function(childSnapshot) {*/
    var product_name = "ABC";
    var buying_price = 100;
    var selling_price = 50;
    var total = product_name + " | " + selling_price;
    //get the item div which is added then append options to that
    $(".item-wrapper-" + div_title).find(".product_option").append('<option>' + total + '</option');

    /*
    //some ..codes..
       });
          })
      } else {
        window.location.href = "{% url 'login' %}";
      }
    });*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productDiv"></div>
<div class="mt-3 text-center"><button class="btn profile-button" style="color: white" type="button" id="btnAddtoList">পণ্য যোগ করুন</button></div>