select2 : 미리 채워진 옵션을 사용자에게 올바르게 표시하는 방법은 무엇입니까?

Question

this jsfiddle에 select2 구현이 있습니다. Github repo를 검색 할 수있게하고 사용자가 선택할 수 있도록 결과를 반환합니다. 특정 검색과 일치하는 Repo가 1 개 뿐인 경우 자동 선택됩니다.

일부 기본 옵션으로 내 select2 양식을 미리 채울 수 있어야합니다. the docs에 명시된 바와 같이 나는이 같은 것을 할 수 있어야한다 : 나는 console.log all selected data 버튼을 누르면

<select id='select2_element' multiple='multiple' style='width:100%;'> 
    <option value="easypr-ja" selected="selected">EasyPR-Java 70 32393764</option> 
</select> 

내가 id 내 프리 필드 REPO의 text에 액세스 할 수 있는지 볼 수 있지만, 브라우저에서 미리 채워진 옵션 위에는 undefined undefined easypr-ja으로 표시됩니다.

기본 옵션의 값을 올바르게 표시하려면 무엇을해야합니까?

다음과 같이 내 구현이 일부 사용자 지정 서식을하고있다

:

var createRepo, formatRepo, formatRepoSelection, selectRepos; 

formatRepoSelection = function(element) { 
    return element.name + ' ' + element.forks + ' ' + element.id; 
}; 

formatRepo = function(element) { 
    var markup; 
    if (!element.loading) { 
    return markup = element.name + ' ' + element.id; 
    } 
}; 

createRepo = function() { 
    $(".btn-create-repos").off("click"); 
    return $(".btn-create-repos").click(function(e) { 
    var el, element_ids; 
    el = $(e.currentTarget); 
    element_ids = $("#select2_element").select2('data'); 
    return console.log(element_ids); 
    }); 
}; 

selectRepos = function() { 
    var option, select2_element; 
    select2_element = $('#select2_element'); 
    select2_element.select2({ 
    placeholder: "Type in 'easypr-ja' to get only 1 result", 
    ajax: { 
     url: "https://api.github.com/search/repositories", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
     return { 
      q: params.term, 
      page: params.page 
     }; 
     }, 
     processResults: function (data, params) { 

     if (data.items.length === 1) { 
      setTimeout(function() { 
       $("#select2-select2_element-results li:first-child").trigger('mouseup'); 
      }, 0); 
      return { 
      results: data.items 
      }; 
     } else { 
      params.page = params.page || 1; 

      return { 
      results: data.items, 
      pagination: { 
       more: (params.page * 30) < data.total_count 
      } 
      }; 
     } 
     }, 
     cache: true 
    }, 

    escapeMarkup: function(markup) { 
     return markup; 
    }, 
    minimumInputLength: 2, 
    templateResult: formatRepo, 
    templateSelection: formatRepoSelection 
    }); 
}; 

$(function() { 
    selectRepos(); 
    return createRepo(); 
}); 

Answer 1

는 form_for와 예를 아래에 따르십시오, 그것은 도움이 될 수 있습니다

<%= f.select(:categories, Category.all.collect {|c| [c.name, c.id]}, {}, id: "event_categories", :multiple => true) %> 

<script type="text/javascript"> 
    $("#event_categories").select2(); 
    <% if @event.id.present?%> 
     $("#event_categories").val(<%= @event.categories.collect(&:id)%>).change() 
    <% elsif params[:action]=="create" || params[:action]=="update" %> 
     $("#event_categories").val(<%=params[:event][:categories].map(&:to_i).drop(1)%>).change() 
    <% end %> 
</script>