在select2 jquery插件中没有调用initSelection

Posted 2023-05-07

【中文标题】在select2 jquery插件中没有调用initSelection

【英文标题】：initSelection is not getting called in select2 jquery plugin

【发布时间】：2013-08-17 15:03:11

【问题描述】：

我正在使用来自 http://ivaynberg.github.io/select2/ 的 select2 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/ 站点加载远程数据的示例。

我查看了 documentation 的 initSelection，它说“只有在需要处理初始输入时才会调用此函数。”，我不确定它到底是什么意思。

我做错了吗？请帮忙

【参考方案1】：

你应该提供初始值：

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

或

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

对于多个值，任一：

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

或

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

见JSFiddle。

【讨论】：

这是对的。即使您提供了一个 initSelection 函数，select2 也决定不调用它，除非您提供一个“值”属性。所以你不得不要么使用一个值 attr，要么提供一个而不使用它。

问题是这不适用于多个选定的选项

此外，value 属性必须为非空 - value="" 也不起作用。你可以放任何字符串，但必须有一些东西。

【参考方案2】：

如果你不想使用默认值，你可以这样做。

$(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', []);可以解决这个问题。

【讨论】：

比在 HTML 中使用虚拟值要好得多，谢谢！

【参考方案3】：

这就是我在更复杂的情况下所做的，因为 - 如果不受控制 - 初始值会保存到 db（在咖啡脚本中）

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

【参考方案4】：

使用这个：

用这个删除以前的选项选择的选项：

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

不是最好的方法，但有效