JQuery/Javascript: Metni aşağı doğru Seç Seçme Aşağı

Question

Sayfanın üzerinde 2 seçim damlası var. İlk açılır menüden bir kategori seçtiğinizde, bu kategorideki ürünleri getirmek ve bunları ikinci bir komşu açılır menüde görüntülemek için bir ajax çağrısı yapılır. Küçük bir detay dışında hepsi harika çalışıyor. Yeni bir kategori seçtiğimde, ürünlerin üzerinden yazmasını istiyorum. Şu anda append yöntemini kullanıyorum ve açıkçası onları ekliyor. .html ve .text yöntemlerini denedim ve metni görüntülemiyorlar.

İlk aşağı açılan değerler bir Laravel çağrısı kullanılarak DB'den iletilir. Bu ne olup bittiğini umarım açıktır:

{!! Form::select('categories[]',$categories,null,['class'=>'input-sm categories']) !!} 

aşağı aşağı ikinci düşüşünü JQuery ile

$(".categories").on('change', function() { 

    var value = parseFloat($(this).val()); 
    var $cat_products = $(".cat_products"); 

    $.ajax({                   
     type: 'GET', 
     dataType:"json", 
     url: 'category_prices/' + value, 
     success: function (categories) { 
     $.each(categories,function(i, product){ 
     $cat_products.append('<option>' +product.product_name+'</option>') 

      }); 

     } 
    }); 

}); 

HTML oluşturulur ikinci bırakma: olması gerektiği gibi

<div class="form-group row"> 
     <div class="col-sm-3 col-md-3"></div> 
     <div class="col-sm-2 col-md-2" > 
      <select class="cat_products"> 

      </select> 
     </div> 
    </div> 

Answer 1

Sadece .empty() listeyi temizlemek:

$.ajax({                    type: 'GET', 
    dataType:"json", 
    url: 'category_prices/' + value, 
    success: function (categories) { 
     $cat_products.empty(); 
     $.each(categories,function(i, product){ 
      $cat_products.append('<option>' +product.product_name+'</option>'); 
     }); 
    } 
}); 

Answer 2

görünüyor Yeni içeriği eklemeden önce seçim öğesinin içeriğini kaldırabilirsiniz. Yani bu gibi görünmelidir: Eğer yeni seçenekler ekleme başlamadan önce

$(".categories").on('change', function() { 

    var value = parseFloat($(this).val()); 
    var $cat_products = $(".cat_products"); 

    // Remove the current options from the select element 
    $cat_products.html(""); 

    $.ajax({                   
    type: 'GET', 
    dataType:"json", 
    url: 'category_prices/' + value, 
    success: function (categories) { 
     $.each(categories,function(i, product){ 
     $cat_products.append('<option>' +product.product_name+'</option>') 
     }); 
    } 
    }); 
});