如何通過從多選下拉菜單中刪除現有選項來附加新選項？

我從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兩次。 –

如何通過從多選下拉菜單中刪除現有選項來附加新選項？

回答

相關問題