JQuery/Javascript:如何替换Select Drop Down中的文本

Question

我的页面上有两个选择下拉列表。当您从第一个下拉列表中选择一个类别时，会调用ajax来获取该类别中的产品，并在第二个相邻的下拉列表中显示它们。除了一个小细节外，一切都很好。当我选择一个新类别时，我希望产品在第二个下拉列表中重写描述。目前我使用的是append方法，它显然会对它们进行附加。我尝试过.html和.text方法，但它们不显示文本。

第一个下拉值是使用Laravel调用从DB传递的。很明显发生了什么：

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

第二个下拉列表是通过JQuery 生成的

 $(".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：

<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

在开始添加新选项之前，只需使用.empty()清除列表：

$.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

在添加新内容之前，您应该能够删除select元素的内容。所以它应该是这样的：

$(".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>' ) 
      });
    }
  });
});