jquery select2 v4 - select select 元素上的默认选项
jquery select2 v4 - select default option on a select element
我正在使用 select2 v4,其中我使用 ajax 方法将 select2 连接到 <select>
元素。一切正常,除了我不能在加载时默认选择的值。
If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.
在此代码中,我想将值默认为 "foo":
标记:
<label class="input">
<select aria-hidden="true" tabindex="-1"
class="form-control user-school-select select2-hidden-accessible"
name="user[school_id]" id="user_school_id">
<option selected="selected" value="1">foo</option>
</select>
<span style="width: 372px;" dir="ltr"
class="select2 select2-container select2-container--default">
<span class="selection">
<span aria-labelledby="select2-user_school_id-container"
tabindex="0" class="select2-selection select2-selection--single"
role="combobox" aria-autocomplete="list" aria-haspopup="true"
aria-expanded="false">
<span title="foo" id="select2-user_school_id-container"
class="select2-selection__rendered"></span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b></span></span></span>
<span class="dropdown-wrapper" aria-hidden="true"></span></span></span>
</label>
此标记由我的 rails 视图 (users/edit.html.erb) 生成:
<%= label_tag nil, nil, :class => "input" do %>
<% if @user.school_id %>
<%= f.select :school_id,
options_for_select({ @user.user_school => @user.school_id }, @user.school_id ), {},
{ class: "form-control user-school-select" } %>
<% else %>
<%= f.select :school_id, {}, {},
{class: "form-control user-school-select"} %>
<% end %>
<% end %>
javascript 在 users.js.erb 中:
$(document).ready(function() {
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 2,
templateResult: formatSchool,
templateSelection: formatSchoolSelection
});
});
function formatSchool (school) {
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
(school.logo_url ? '<img src="' + school.logo_url + '" style="max-width: 100%" />' : "") +
'</div>' +
'<div class="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-9">' + school.name + '</div>' +
'</div>';
markup += '</div></div>';
return markup;
}
function formatSchoolSelection (school) {
return school.name;
}
我可以在 select2 生成的标记中看到跨度有一个 title
属性填充了我的值,但实际跨度文本为空:
<span class="selection">
<span aria-labelledby="select2-user_school_id-container" tabindex="0"
class="select2-selection select2-selection--single"
role="combobox" aria-autocomplete="list" aria-haspopup="true"
aria-expanded="false">
<span title="foo" id="select2-user_school_id-container"
class="select2-selection__rendered"></span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b></span></span></span>
我也尝试过使用 initSelection
的其他已弃用方法但无济于事:
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 2,
templateResult: formatSchool,
templateSelection: formatSchoolSelection,
initSelection : function (element, callback) {
var data = {"id":"1","text":'foo'};
callback(data);
}
});
$(".user-school-select").select2("data", {"id": 1, "text": "foo"});
我也试过添加这一行也无济于事:
$(".user-school-select").select2("val", "1");
我看过很多类似问题的答案,但它们不适用于我的情况。我想是因为我正在使用 select2 v4。我读过的大多数其他答案都说您需要将 initSelection
与 val
结合使用 - 但那些其他示例始终使用 <input>
元素而不是 <select>
.我确实在最新文档中注意到 initSelection
已贬值,应该使用 DataAdapter 的 current
方法,但我不知道如何应用它到我上面的代码?
设置值如下后,尝试在 select2
上触发 change
:
$(".user-school-select").select2("val", "1").trigger('change');
不是正确的答案,但我不得不应用一个解决方法 - 通过删除 templateSelection
方法,问题得到解决。虽然这不是一个好的解决方案,因为我想要 templateSelection 方法的好处。我暂时没有它。
$(document).ready(function() {
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 2,
templateResult: formatSchool/*,
templateSelection: formatSchoolSelection*/
});
});
我正在使用 select2 v4,其中我使用 ajax 方法将 select2 连接到 <select>
元素。一切正常,除了我不能在加载时默认选择的值。
If you need to provide default selections, you just need to include an option for each selection that contains the value and text that should be displayed.
在此代码中,我想将值默认为 "foo":
标记:
<label class="input">
<select aria-hidden="true" tabindex="-1"
class="form-control user-school-select select2-hidden-accessible"
name="user[school_id]" id="user_school_id">
<option selected="selected" value="1">foo</option>
</select>
<span style="width: 372px;" dir="ltr"
class="select2 select2-container select2-container--default">
<span class="selection">
<span aria-labelledby="select2-user_school_id-container"
tabindex="0" class="select2-selection select2-selection--single"
role="combobox" aria-autocomplete="list" aria-haspopup="true"
aria-expanded="false">
<span title="foo" id="select2-user_school_id-container"
class="select2-selection__rendered"></span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b></span></span></span>
<span class="dropdown-wrapper" aria-hidden="true"></span></span></span>
</label>
此标记由我的 rails 视图 (users/edit.html.erb) 生成:
<%= label_tag nil, nil, :class => "input" do %>
<% if @user.school_id %>
<%= f.select :school_id,
options_for_select({ @user.user_school => @user.school_id }, @user.school_id ), {},
{ class: "form-control user-school-select" } %>
<% else %>
<%= f.select :school_id, {}, {},
{class: "form-control user-school-select"} %>
<% end %>
<% end %>
javascript 在 users.js.erb 中:
$(document).ready(function() {
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 2,
templateResult: formatSchool,
templateSelection: formatSchoolSelection
});
});
function formatSchool (school) {
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
(school.logo_url ? '<img src="' + school.logo_url + '" style="max-width: 100%" />' : "") +
'</div>' +
'<div class="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-9">' + school.name + '</div>' +
'</div>';
markup += '</div></div>';
return markup;
}
function formatSchoolSelection (school) {
return school.name;
}
我可以在 select2 生成的标记中看到跨度有一个 title
属性填充了我的值,但实际跨度文本为空:
<span class="selection">
<span aria-labelledby="select2-user_school_id-container" tabindex="0"
class="select2-selection select2-selection--single"
role="combobox" aria-autocomplete="list" aria-haspopup="true"
aria-expanded="false">
<span title="foo" id="select2-user_school_id-container"
class="select2-selection__rendered"></span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b></span></span></span>
我也尝试过使用 initSelection
的其他已弃用方法但无济于事:
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 2,
templateResult: formatSchool,
templateSelection: formatSchoolSelection,
initSelection : function (element, callback) {
var data = {"id":"1","text":'foo'};
callback(data);
}
});
$(".user-school-select").select2("data", {"id": 1, "text": "foo"});
我也试过添加这一行也无济于事:
$(".user-school-select").select2("val", "1");
我看过很多类似问题的答案,但它们不适用于我的情况。我想是因为我正在使用 select2 v4。我读过的大多数其他答案都说您需要将 initSelection
与 val
结合使用 - 但那些其他示例始终使用 <input>
元素而不是 <select>
.我确实在最新文档中注意到 initSelection
已贬值,应该使用 DataAdapter 的 current
方法,但我不知道如何应用它到我上面的代码?
设置值如下后,尝试在 select2
上触发 change
:
$(".user-school-select").select2("val", "1").trigger('change');
不是正确的答案,但我不得不应用一个解决方法 - 通过删除 templateSelection
方法,问题得到解决。虽然这不是一个好的解决方案,因为我想要 templateSelection 方法的好处。我暂时没有它。
$(document).ready(function() {
$(".user-school-select").select2({
ajax: {
url: "/schools",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 2,
templateResult: formatSchool/*,
templateSelection: formatSchoolSelection*/
});
});