initSelection wird nicht in select2 jquery plugin

Question

aufgerufen Ich bin mit Select2 jquery Plugin von http://ivaynberg.github.io/select2/.

Ich verwende folgenden Code.

$(document).ready(function() { 
      $("#e6").select2({ 
       placeholder: "Search for a movie", 
       minimumInputLength: 1, 
       ajax: { // instead of writing the function to execute the request we use Select2's convenient helper 
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", 
        dataType: 'jsonp', 
        quietMillis: 1000, 
        data: function (term, page) { 
         return { 
          q: term, // search term 
          page_limit: 10, 
          apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working 
         }; 
        }, 
        results: function (data, page) { // parse the results into the format expected by Select2. 
         // since we are using custom formatting functions we do not need to alter remote JSON data 
         return { results: data.movies }; 
        } 
       }, 
       initSelection: function (element, callback) { 
        var id = 9942;//$(element).val(); 
        alert('initSelection'); 
        if (id !== "") { 
         $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/" + id + ".json", { 
          data: { 
           apikey: "ju6z9mjyajq2djue3gbvv26t" 
          }, 
          dataType: "jsonp" 
         }).done(function (data) { callback(data); }); 
        } 
       }, 

       formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller 
       escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results 
      }); 

     }); 


     $(document).ready(function() { 
      $("#e6").on("select2-selecting", function (e) { 
       var v = 10; 
       alert("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice)); 
       var id = document.getElementById('<%= savebtn.ClientID %>'); 
       id.value = e.val; 
       id.click(); 

      }); 
     }); 

Problem: Aus irgendwelchen Gründen genannt und dies wegen initSelection nicht immer, ich bin nicht in der Lage Wert für das Textfeld über Post-backs zu setzen.

Ich benutze das Laden von Remote-Daten Beispiel von http://ivaynberg.github.io/select2/ Website.

schaute ich auf die documentation für initSelection und es heißt „Diese Funktion wird nur aufgerufen werden, wenn es Anfangseingabe verarbeitet werden.“ Ich bin nicht sicher, was genau bedeutet es.

Mache ich etwas falsch? Bitte helfen

Answer 1

Sie sollten Anfangswert bieten:

<input ... value="192" ... /> 

oder

$('#e6').select2('val', 192); 

Für mehrere Werte, entweder:

<input ... value="192,193" ... /> 

oder

$('#e6').select2('val', [192,193]); 

Siehe JSFiddle.

Answer 2

Nun ist es das, was ich für komplexere Situationen tun, da -wenn nicht kontrolliert- initalvalue wird (in Coffeescript) db gespeichert

if $("#categories").val().length is 0 
    $("#categories").val "initialValue" 
    $("#categories").select2 
    closeOnSelect:false 
    containerCssClass: "select2-default" 
    formatNoMatches: -> 
     I18n.t "shared.navbar.no_matches_found" 
    formatInputTooShort: (input, min) -> 
     I18n.t("shared.navbar.please_select") + " " + (min - input.length) + " " + I18n.t("shared.navbar.more_characters") 
    formatSelectionTooBig: (limit) -> 
     I18n.t("shared.navbar.you_can_only_select") + " " + limit + " " + I18n.t("shared.navbar.item") + ((if limit is 1 then "" else "s")) 
    formatLoadMore: (pageNumber) -> 
     I18n.t "shared.navbar.loading_more_results" 
    formatSearching: -> 
     I18n.t "shared.navbar.searching" 
    minimumInputLength: 3 
    width: "100%" 
    multiple: true 
    ajax: 
     url: "/categories/list_styles" 
     dataType: "json" 
     quietMillis: 100 
     data: (term, page) -> 
     q: term 
     page_limit: 10 
     page: page 
     results: (data) -> 
     hashtable = {} 
     results = [] 
     $.each data, (index, item) -> 
      if hashtable[item.parent] is `undefined` 
      hashtable[item.parent] = 
       text: item.parent 
       children: [] 
      results.push hashtable[item.parent] 
      hashtable[item.parent].children.push 
      id: item._id 
      text: item.title 
     results: results 
    initSelection: (element, callback) -> 
     data1 = [] 
     if element.val() is "initialValue" 
     element.val('') 
     jQuery(element.val().split(",")).each -> 
     $.ajax 
      type: "get" 
      url: "/providers/list_categories" 
      async: false 
      dataType: "json" 
      data: { id: $("#provider_id").val(), selected: $("#categories").val().split(",") } 
      success: (category) -> 
      $.each category, (i, obj) -> 
       data1.push 
       id: @_id 
       text: @title 
     callback data1 
    $.each $(".select2-container"), (i, n) -> 
    $(n).next().show().fadeTo(0, 0).height("0px").css "left", "auto" # make the original select visible for validation engine and hidden for us 
    $(n).prepend $(n).next() 
    $(n).delay(500).queue -> 
     $(this).removeClass "validate[required]" #remove the class name from select2 container(div), so that validation engine dose not validate it 
     $(this).dequeue() 

Answer 3

Sie können wie folgt einfach tun, wenn Sie nicht wollen, verwenden ein Wert standardmäßig.

$(document).ready(function() { 
      $("#e6").select2({ 
     ... 
       }, 
       initSelection: function (element, callback) { 
     ... 
       }, 
       formatResult: movieFormatResult, // omitted for brevity, see the source of this page 
       formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page 
       dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller 
       escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results 
      }).select2('val', []); 

     }); 

Hinzufügen select2('val', []); am Ende der Deklaration dieses Problem zu lösen.

Answer 4

verwenden:

den vorherigen Optionen ausgewählten Optionen mit diesem entfernen:

 arr = json.filter(function(obj) { 
      return arrSelectedValues.indexOf(obj.foo) == -1; 
     }); 

und ein neues Element erstellen ausgewählt:

 option = document.createElement('option'); 
     option.value = 'foo'; 
     option.innerHTML = 'foo'; 
     option.selected = true; 

     document.getElementById('selectFoobares').appendChild(option); 

nicht der beste Weg, sondern arbeitet