如何通过从多选下拉菜单中删除现有选项来附加新选项？

我从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); 


       }, 


      }); 
     }) 
    }

来源

2017-08-11 Gerle Batde

创建新的项目之前，你可以在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'); 
},

来源

2017-08-11 14:56:33

第一个解决方案奏效！这太神奇了！谢谢！ –

你能解释第二种选择是如何区分的吗？由于它会覆盖现有选项并覆盖它，会影响性能吗？谢谢！ –

与原始的2 + N数组项相比，第二个例子实际上更快，因为它只访问DOM两次。 –

如何通过从多选下拉菜单中删除现有选项来附加新选项？

回答

相关问题