Question

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

但是当我点击状态下拉菜单中的其他选项时，它没有在第二次下拉菜单中更新。

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

下

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

Answer 1

从我在代码中看到的内容中，您总是会添加新条目，但之前不会删除旧条目。因此，您的列表可能会随着新条目的结束而变得越来越长？在添加新条目之前尝试删除条目：

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

根据我的经验，带有$ .append的$ .each可以在一些列表条目中变得非常慢。我会用原生的javascript用for（）和createElement（）重写它。

Answer 2

您需要在html中设置.each并在.each结束后追加。从第一个下拉列表中删除选项无需更改，您需要使用$("#productSubCategory option").remove();

删除之前的内容

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

        $("#productCategory").append(html);
    }

});  


$("#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;
            var html = '';
            $.each(subCategoryBOs, function (key, subCategoryBO) {
                subCategories.push({ lable: subCategoryBO.categoryId, value: subCategoryBO.categoryName });
                html += '<option value=' + subCategoryBO.categoryId + '>' + subCategoryBO.categoryName + '</option>';
            });
            $("#productSubCategory").append(html);
        }
    });
});

Answer 3

这里你必须做的很简单的事情就是每次加载子类别时都会在此之前放置。

 $(dropdown).empty();

谢谢！

Answer 4

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

Answer 5

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

  });     
});

如何清理select-html标签下的选项值

5 个答案: