Javascript 如何清除select-html标记下的选项值

我在一个页面中使用了两个下拉列表第一个下拉列表类别和第二个下拉列表子类别，两个下拉列表都将动态加载，其中我将从第一个下拉列表中选择一个值，因此我必须将值加载到第二个下拉列表。我已经这样做了，但事情是它将第一次完成

但当我在“状态”下拉列表中单击其他选项时，它在第二个下拉列表中不会得到更新

我的代码是： 这段代码是在document.ready下加载页面ie时获取类别列表

$.ajax({
    url : "../category/getCategory",
    type : "post",
    contentType : "application/json",
    dataType : "json",
    success : function(data) {
        var categoryBOs = data.categoryBOs;
        $.each(categoryBOs, function(key, value) {
            $("#productCategory").append(
                    '<option value='+value.categoryId+'>'
                            + value.categoryName
                            + '</option>');
        });
    }

});

ajax的这一部分是加载子类别

$("#productCategory").on('change', function() {
    alert($(this).val());
    $.ajax({
        url : "../category/getSubCategory",
        type : "post",
        cache : false,
        dataType : "json",
        data : "categoryId=" + $(this).val(),
        success : function(data) {
            var subCategoryBOs = data.subCategoryBOs;

            $.each(subCategoryBOs, function(key, subCategoryBO) {
                subCategories.push({lable:subCategoryBO.categoryId , value:subCategoryBO.categoryName});
                 $("#productSubCategory").append(
                        '<option value='+subCategoryBO.categoryId+'>'
                                + subCategoryBO.categoryName
                                + '</option>'); 
            });
        }
    });
});

---

从我在代码中看到的情况来看，您总是附加新条目，但以前从未删除旧条目。那么，你的列表可能会随着新条目的出现而变得越来越长？在附加新条目之前，请尝试删除这些条目：

$("#productSubCategory option").remove();
$("#productSubCategory").append(
    '<option value=' + subCategoryBO.categoryId + '>' + subCategoryBO.categoryName + '</option>');

根据我的经验，$.each和$.append在某些列表条目数量上会变得非常缓慢。我将使用for和createElement用本机javascript重写它。

您需要在.each中生成html，并在.each之后追加。从第一个下拉列表中没有选项更改您需要使用$productSubCategory option删除上一个选项。删除

---

你们在这里要做的一件简单的事情是，每次当你们加载子类别时，只需在之前放置下面的内容

 $(dropdown).empty();

---

谢谢

尝试在第一个$.each之前添加$productCategory.empty，在第二个$.each之前添加$productSubCategory.empty。

能否为相同的值创建JSFIDLE

 $(dropdown).empty();

$("select#catname").change(function () {
   
 // part of code 

          $("#subcatname").append($newOpt1); 

// appending the category of dropdown
        }
        $("#subcatname").trigger('contentChanged');
  // changing the contenet
      }
    });
    $("select#subcatname").change(function () {
    // something changes after trigger in dropdown
  });

// removing the content or clearing the content after selecting
       $("#subcatname").empty();

  });     
});