initSelection không được gọi trong plugin jquery select2

Question

Tôi đang sử dụng plugin jquery select2 từ http://ivaynberg.github.io/select2/.

Tôi đang sử dụng mã sau đây.

$(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(); 

      }); 
     }); 

Vấn đề: Đối với một số lý do initSelection là không nhận được gọi và vì điều này, tôi không thể để thiết lập giá trị cho textbox qua sau lưng.

Tôi đang sử dụng tải ví dụ dữ liệu từ xa từ http://ivaynberg.github.io/select2/ trang web.

Tôi đã xem documentation cho initSelection và nó nói "Chức năng này sẽ chỉ được gọi khi có đầu vào ban đầu được xử lý.", Tôi không chắc nó có ý nghĩa gì.

Tôi có làm gì sai không? Xin vui lòng giúp

Answer 1

Bạn nên cung cấp giá trị ban đầu:

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

hoặc

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

Đối với nhiều giá trị, một trong hai:

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

hoặc

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

Xem JSFiddle.

Answer 2

Vâng đây là những gì tôi làm cho các tình huống phức tạp hơn vì -Nếu không controlled- initalvalue được lưu vào db (trong coffeescript)

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

Bạn có thể làm đơn giản như thế này nếu bạn không muốn sử dụng một giá trị theo mặc định.

$(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', []); 

     }); 

Thêm select2('val', []); vào cuối tuyên bố giải quyết vấn đề này.

Answer 4

Sử dụng này:

loại bỏ các tùy chọn trước tùy chọn đã chọn với điều này:

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

và tạo ra một nguyên tố mới được lựa chọn:

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

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

không phải là cách tốt nhất nhưng việc