2013-08-15 16 views
14

http://ivaynberg.github.io/select2/'dan select2 jquery eklentisini kullanıyorum.initSelection, select2 jquery eklentisinde çağrılmadı

Aşağıdaki kodu kullanıyorum.

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

      }); 
     }); 

Sorun: Bazı nedenlerden dolayı initSelection denilen almıyor ve bu nedenle, post-sırt boyunca metin için değer ayarlamak mümkün değilim.

http://ivaynberg.github.io/select2/ sitesinden yükleme uzak veri örneğini kullanıyorum.

Ben initSelection için documentation bakıp diyor " Bu işlev yalnızca ilk giriş işlenecek olduğunda çağrılır.", Anlamını tam olarak ne emin değilim.

Yanlış bir şey yapıyorum? Lütfen yardım

cevap

22

Sen başlangıç ​​değeri vermelidir:

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

veya çoklu değerleri için

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

, ya:

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

veya

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

Bkz. JSFiddle.

+1

Teşekkürler!!! Bu – SharpCoder

+2

çalışır Bu doğru. Bir initSelection işlevi sağlasanız bile, select2, "value" değerini sağlamazsanız, onu çağırmamaya karar verir. Yani, bir değer attrini kullanmak zorundasın, ya da birini sağla ve kullanmayacaksın. – fastmultiplication

+0

Sorun şu ki bu seçili çoklu seçenekler için işe yaramaz –

0

Eh bu -eğer değil kontrollü initalvalue Kullanmak istemiyorsanız Böyle basitçe yapabilirsiniz

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() 
6

(CoffeeScript olarak) db kurtulur beri daha karmaşık durumlar için ne olduğunu varsayılan olarak bir değer.

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

     }); 

beyanı sonunda select2('val', []); ekleme bu sorunu çözmek.

+0

HTML'de bir kukla değer kullanmaktan çok daha iyi, teşekkürler! – moeTi

+0

bir çekicilik gibi çalışır (Sürüm: 3.5.4 ile test edilmiştir)! –

0

bunu kullanın: bununla

önceki seçeneklerini kaldırmak seçilen seçenekleri:

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

ve yeni seçilen öğe oluşturun:

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

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

değil en iyi yolu ama çalışır

İlgili konular