How to append new options by removing the existing options on change from multiselect dropdown?

Question

I get the options from ajax as shown below. This dropdown is dependent on another dropdown>. The below example is only to append options on onload and it does the job. However, in the second example, when I try to change the options on change when other option is selected, it is just keep appending options rather than removing the existing ones. How to generate new options by deleted the existing ones based on selected value?

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) {

                    }
                });
            }

//Second Example

initSelect: function () { var data = {};

        $('#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

Before you create the new items you can call empty() on the select to remove the previous items:

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

Alternatively you can build the new options in a single HTML string and set html() which will overwrite the existing options:

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