[英]select2: How to display pre-filled options properly to the user?
我在這個jsfiddle上有一個有效的select2實現。 它可以搜索Github存儲庫並返回結果,以便用戶選擇它們。 如果只有1個repo匹配給定的搜索,它將被自動選擇。
我需要能夠使用一些默認選項預先填寫我的select2表單。 如文檔中所述,我應該能夠執行以下操作:
<select id='select2_element' multiple='multiple' style='width:100%;'>
<option value="easypr-ja" selected="selected">EasyPR-Java 70 32393764</option>
</select>
當我按下console.log all selected data
按鈕時,我可以看到我的預填充undefined undefined easypr-ja
的id
和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();
});
請使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.