Select2在HTML中设置选定值
Select2 set selected value in HTML
是否有一种方法,我可以设置选定的id/文本在select2在HTML就像被显示和选择?
我使用jquery select2版本4.0.0
这是代码:
$("#users").select2({
placeholder: "select user...",
escapeMarkup: function (markup) { return markup; },
ajax: {
url: "users.json",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (response, page) {
return {
results: response.data
};
},
cache: true
},
templateResult: function(item){
if (item.loading) {
return item.text;
}
return item.username + " <small><i>(" + item.role + ")</i></small> "; // display data in html
},
templateSelection: function(item){
if (item.username){
return item.username + " <small><i>(" + item.role + ")</i></small> "; // select row in html
}
return item.text; // for placeholder
}
});
设置所选值:
// bring data for to set selected value, data contains fields data
var selected_user_id = data.id,
// this is the content that I need to use as it is HTML content
selected_user_text_html = data.username + " <small><i>(" + data.role + ")</i></small> ",
// this is the one that I am using and is not html because there is no way to put html inside a option select item
selected_user_text_regular = data.username + " (" + data.role + ") ";
// set selected value
$("#users").append("<option value='"+selected_user_id+"' selected='selected'>"+selected_user_text_regular+"</option>");
// trigger update
$("#users").trigger("change");
是否有一种方法可以将所选文本设置为HTML而不是纯文本?
是的,你可以。Select2有两个有用的选项"templateSelection"answers"templateResult"都是函数,你可以创建任何你想要的html包装器。只需像这样将选项传递给select2()方法.
var data = [{id: 100, text: "AAAAAA"}, {id: 200, text: "BBBB"}]
var formatState = function(result) {return $("<b>"+result.text+"</b>")}
var formatSelection = function(selection){return $("<b>"+selection.text+"</b>") }
$(".js-example-basic-single").select2({ data:data,templateResult: formatState, templateSelection: formatSelection
}).val(100).change();
你应该看到id:100的选项被选中了。
如果我没理解错的话,
根据api https://select2.github.io/examples.html,你可以把它放到HTML标记中,然后调用javascript
var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
]
$(".example").select2({
data: data
})
<select class="example">
<option value="3" selected="selected">invalid</option>
</select>
假设ajax在声明
时被调用当ajax返回时,您将无法附加该选项。
ajax: {
...
processResults: function (response, page) {
//something like
$.each( response.data, function( i, obj ) {
if(obj.selected)
{
var elem = $('#users')
elem.append($('<option>', {
value: obj.value,
text : obj.text,
selected : "selected"
}));
}
})
return {
results: response.data
};
},
cache: true
},
也更新
考虑下面的代码来代替你的其他代码或给你的想法
<style>
.optionrole{
font-size: small;
font-style: italic
}
</style>
var sUserId = data.id,
var sUserText = data.username
+ "<span class="optionrole"> ("
+ data.role
+ ")</span> ";
// set selected value
var elem = $('#users')
elem.append($('<option>', {
value: sUserId,
text : sUserText,
selected : "selected"
}));
// trigger update
elem.trigger("change");
相关文章:
- 如何设置html元素填充的动画
- 使用val()在jquery循环中设置html字符串的val
- 在 PHP 块中使用 Javascript 设置 HTML 文本框的值(使用 echo)
- JS for循环来设置HTML对象参数
- 使用JavaScript在select字段中使用optgroup设置html选项值
- 使用jQuery在select选项上设置HTML数据属性
- 设置html时的验证
- 如何从javascript中设置html表单的属性
- 如何使用Angular 2设置HTML选择值
- 设置 HTML 自定义属性与在 ID 属性中存储信息
- 无法通过javascript函数的自动计算设置html元素值
- 通过单选按钮状态设置HTML元素的可见性
- 通过参数设置html组合框的选定选项
- 使用javascript设置html页面的标题
- 如何从javascript设置html单选值
- 通过单独的js文件设置HTML值
- 我们如何使用Jquery和ASP.NET MVC 4复杂模型数据设置HTML元素的值
- 如何使用来自@Html.TextBoxFor的用户输入设置@Html.RadioButtonFor的值
- ckEditor插件iframe对话框设置html输入
- 如何从json中设置HTML选择选项