如何通过从多选下拉列表中删除现有的更改选项来附加新选项？

Question

我从 ajax 获得选项，如下所示。此下拉列表依赖于另一个下拉列表>。下面的示例只是在 onload 上附加选项，它完成了这项工作。但是，在第二个示例中，当我尝试在选择其他选项时更改更改选项时，它只是继续附加选项而不是删除现有选项。如何根据所选值删除现有选项来生成新选项？

enter code here

//First Example 
     openPage: function () {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: _config.GetCampaignsByMarket,
                    data: {
                        marketValue: $('#market-select').val()
                    },
                    //contentType: 'application/json',
                    success: function (data) {
                        var items = '';
                        $.each(data, function (key, val) {

                            $('.select-ajax').append('<option selected value="' + val.CampaignInitiative + '">' + val.CampaignInitiative + '</option>');
                          //items += "<option value='" + val.CampaignInitiative + "'>" + val.CampaignInitiative + "</option>";

                        });


                     $('.select-ajax').multiselect('rebuild');



                    },
                    error: function (xhr, status, error) {

                    }
                });
            }

//第二个例子

initSelect: 函数 () { var 数据 = {};

        $('#market-select').change(function () {
            //$('#campaign-select').empty();
            var selected = $(this).val(); // get current dropdown element selected value
            $.ajax({

                type: "GET",
                dataType: "json",
                url: _config.GetCampaignsByMarket,
                data: { marketValue: $('#market-select').val() },
                success: function (data) {
                    var items = '';
                    $.each(data, function (key, val) {
                        // items += "<option value='" + val.CampaignInitiative + "'>" + val.CampaignInitiative + "</option>";
                        $('.select-ajax').append('<option selected value="' + val.CampaignInitiative + '">' + val.CampaignInitiative + '</option>');

                    });


                    $('.select-ajax').multiselect('rebuild');
                    $('.select-ajax').multiselect('updateButtonText', false);


                },


            });
        })
    }

Answer 1

在创建新项目之前，您可以在select 上调用empty() 以删除以前的项目：

success: function (data) {
  var items = '';
  $('.select-ajax').empty(); // add this
  $.each(data, function(key, val) {
    $('.select-ajax').append('<option selected value="' + val.CampaignInitiative + '">' + val.CampaignInitiative + '</option>');
  });
  $('.select-ajax').multiselect('rebuild');
},

或者，您可以在单个 HTML 字符串中构建新选项并设置 html()，这将覆盖现有选项：

success: function (data) {
  var options = data.map(function(o) {
    return '<option selected value="' + o.CampaignInitiative + '">' + o.CampaignInitiative + '</option>';
  }).join('');
  $('.select-ajax').html(options).multiselect('rebuild');
},