2013-08-15 11 views
14

मैं http://ivaynberg.github.io/select2/ से select2 jquery प्लगइन का उपयोग कर रहा हूं।init चयन चयन 2 jquery प्लगइन में नहीं जा रहा है

मैं निम्नलिखित कोड का उपयोग कर रहा हूं।

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

      }); 
     }); 

समस्या: कुछ कारणों के लिए initSelection कहा जाता हो रही है नहीं है और इस वजह से, मैं के बाद पीठ भर में टेक्स्ट बॉक्स की अधिकतम मूल्य निर्धारित करने में सक्षम नहीं हूँ।

मैं http://ivaynberg.github.io/select2/ साइट से रिमोट डेटा उदाहरण लोड करने का उपयोग कर रहा हूं।

मैं initSelection के लिए documentation को देखा और यह कहते हैं, "यह फ़ंक्शन केवल जब वहाँ प्रारंभिक इनपुट संसाधित करने के लिए बुलाया जाएगा।", मुझे यकीन है कि वास्तव में क्या इसका मतलब है कि नहीं कर रहा हूँ।

क्या मैं कुछ गलत कर रहा हूं? कृपया मदद

उत्तर

22

आप प्रारंभिक मूल्य प्रदान करना चाहिए:

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

या

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

से अधिक मान के लिए, या तो:

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

या

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

JSFiddle देखें।

+1

धन्यवाद!!! यह – SharpCoder

+2

काम करता है यह सही है। यहां तक ​​कि यदि आप एक initSelection फ़ंक्शन प्रदान करते हैं, तो चुनें 2 इसे तब तक कॉल न करने का निर्णय लेता है जब तक कि आप "मान" attr प्रदान नहीं करते। इसलिए आपको या तो एक मूल्य एटीआर का उपयोग करने के लिए मजबूर होना पड़ता है, या एक प्रदान करता है और इसका उपयोग नहीं करता है। – fastmultiplication

+0

समस्या यह है कि यह कई चयनित विकल्पों के लिए काम नहीं करेगा –

0

खैर यह है कि क्या मैं कुछ जटिल परिस्थितियों के लिए करते हैं के बाद से -यदि नहीं controlled- initalvalue (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() 
6

आप इस तरह बस क्या कर सकते हैं आप का उपयोग नहीं करना चाहते हैं, तो db से सहेजा जाता है डिफ़ॉल्ट रूप से एक मूल्य।

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

     }); 

घोषणा के अंत में select2('val', []); जोड़ा जा रहा है इस समस्या का समाधान।

+0

एचटीएमएल में एक डमी मान का उपयोग करने से काफी बेहतर, धन्यवाद! – moeTi

+0

एक आकर्षण की तरह काम करता है (संस्करण के साथ परीक्षण: 3.5.4)! –

0

उपयोग करें:

पिछले विकल्पों को दूर इस के साथ चयनित विकल्प:

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

और एक नए तत्व का चयन किया बनाने के लिए:

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

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

नहीं सबसे अच्छा तरीका है, लेकिन काम करता है

संबंधित मुद्दे