Select2以編程方式附加選項，不發送形式

Question

爲什麼在向編程方式附加選項發送Select2元素時不識別表單？

的Html

jQuery的選擇二

$('#subrecursos').select2({ 
      width: null, 
      multiple: true, 
      allowClear: true, 
      tags: true, 
      "language": { 
       "noResults": function() { 
        return "<i>Please Add Subresource as 'Name'|'Cost'|'Price'|'Capacity'(19V|50|70|2 or 20V)</i>"; 
       } 
      }, 
      escapeMarkup: function (markup) { 
       return markup; 
      }, 
      id: function (object) { 
       return object.text; 
      }, 
      //Allow manually entered text in drop down. 
      createSearchChoice: function (term, data) { 
       if ($(data).filter(function() { 
        return this.text.localeCompare(term) === 0; 
       }).length === 0) { 
        return { id: term, text: term }; 
       } 
      } 

     }); 

jQuery的附加選項

for (var i = 0; i < parseInt($("#limitsub").val()) ; i++) 
    {    
    var valsub = (i + 1) + '-' + $("#nsubcant").val() + '|||' + $("#cantsub").val(); 
    var option='<option value="' + valsub + '" >' + valsub + '</option>'; 
    $("#subrecursos").append(option);//append the option 
    $(".select2-selection__rendered").append('<li class="select2-selection__choice" title="' + valsub + '"><span class="select2-selection__choice__remove" role="presentation">×</span>' + valsub + '</li>'); 
    //append the tags 
    } 

追加前：

追加後：

直到這裏一切正常， 但是當發送表單時，選項無法識別。 添加標籤時，鍵入的選項在表單中被識別。 爲什麼會發生這種情況？爲什麼只識別鍵入的選項而不是以編程方式添加？ 非常感謝！

Answer 1

你附加你的選擇的方式$(".select2-selection__rendered").append(是不好的選擇2，當您發送的形式選擇2需要格式化您的選擇表單數據，但你的選擇是沒有在select2數據收集中找到的地方。

$("#subrecursos").append(option);這種方式是很好的方式，但你必須$("#subrecursos").val([1,2]).trigger('change')做出多重選擇

後看看這個answer，人要求如何添加選擇2選項，並選擇它們。我認爲它完全需要以更強大的方式

Answer 2

我在jsfiddle上創建了一個簡單的工作文件https://jsfiddle.net/bindrid/dj4tj1ak/如果在選擇某個項目後提取數據，則會將其編碼爲記住所選值。

 var sel2Options = { 
       width: null, 
       multiple: true, 
       allowClear: true, 
       tags: true, 
       "language": { 
        "noResults": function() { 
         return "<i>Please Add Subresource as 'Name'|'Cost'|'Price'|'Capacity'(19V|50|70|2 or 20V)</i>"; 
        } 
       }, 
       escapeMarkup: function (markup) { 
        return markup; 
       }, 
       id: function (object) { 
        return object.text; 
       }, 
       //Allow manually entered text in drop down. 
       createSearchChoice: function (term, data) { 
        if ($(data).filter(function() { 
         return this.text.localeCompare(term) === 0; 
        }).length === 0) { 
         return { id: term, text: term }; 
        } 
       } 

      }; 
      $('#subrecursos').select2(sel2Options); 

然後第二部分

  for (var i = 0; i < parseInt($("#limitsub").val()) ; i++) { 
       var valsub = (i + 1) + '-' + $("#nsubcant").val() + '|||' + $("#cantsub").val(); 
       var option = '<option value="' + valsub + '" >' + valsub + '</option>'; 
       $("#subrecursos").append(option);//append the option 

       //append the tags 
      } 

      $('#subrecursos').select2("destroy"); 
      $('#subrecursos').select2(sel2Options);