Select2在HTML中设置选定的值

Question

有没有一种方法可以在HTML中设置选定的id / text以使其像被显示和选择的方式一样，就像在select2中？

我正在使用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中设置选定的文本而不是纯文本？

- Ivan Juarez

---

可能吧，我发现很难理解你想做什么。 "To set selected value I do:" 代码块在哪里？你可能应该包含HTML。 - Seabizkit

Answer 1

是的，您可以这样做。Select2有两个有用的选项"templateSelection"和"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的选项被选择了。

希望我能帮到你；

- lexeek

---

使用本地数据可以正常工作，但是通过Ajax调用无法实现。 - Ivan Juarez

哦，我明白问题了。你应该返回jQuery对象返回$('<span>' + item.username + " <small><i>(" + item.role + ")</i></small> ");返回$('<span>' + item.username + " <small><i>(" + item.role + ")</i></small></span> "); - lexeek

在您的回调函数中，您返回纯文本并在选项中获取它，只需使用jQuery将其包装即可。 - lexeek

如果你在代码中看到，我已经在结果和选择上使用了模板解析器，问题是我不能像我提到的那样在选择选项中添加HTML。 - Ivan Juarez

Answer 2

如果我理解正确，

根据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");

- Seabizkit

---

在最后一个示例中，你做得还不错，但不要忘记，在任何选项选择中都不允许使用HTML代码。这就是为什么我无法在内部显示HTML代码的问题，因为我需要通过程序来完成此操作，即使是所选值的解析器（templateSelection）也不允许我这样做。 - Ivan Juarez

@IvanJuarez 看来你关于标准的 HTML 代码不应该在 select 中是正确的，我不得不谷歌一下。回到重点...从 ajax 返回中获取所选选项。抱歉，我无法理解你的评论是否有效。 - Seabizkit