Jquery选择图像答案

【问题标题】：Jquery select with imageJquery选择图像
【发布时间】：2014-06-05 09:36:24
【问题描述】：

我正在使用 jquery select2 插件，这是我的第一个选择：

$('#dropdown_users').select2({
        placeholder: 'Search for a category', 
        minimumInputLength: 2,
        allowClear: true,
        ajax: {
            url: "search.php",
            dataType: 'json',
            quietMillis: 100,
            data: function (term, page) {
                return {
                    term: term, //search term
                    page_limit: 20 // page size
                };
            },
            results: function (data, page) {
                return { results: data.results };
            }
        }

});

这很完美，文本显示出来了。

我不想在显示的文本中添加图像，我做了什么：

function format(state) {
        if (!state.id) return state.text; // optgroup
        return "<img class='flag' src='uploads/" + state.text.toLowerCase() + ".jpg'/>";
}
$('#dropdown_users').select2({
        placeholder: 'Search for a category', 
        minimumInputLength: 2,
        allowClear: true,
        ajax: {
            url: "search.php",
            dataType: 'json',
            quietMillis: 100,
            data: function (term, page) {
                return {
                    term: term, //search term
                    page_limit: 20 // page size
                };
            },
            results: function (data, page) {
                return { results: data.results };
            }
        },
        formatResult: format,
        formatSelection: format,
        escapeMarkup: function(m) { return m; }

});

发生了什么：

图片显示正确。
图片旁边的文字消失了。

为什么？有人可以帮我解决这个问题吗？？问候！！

【问题讨论】：

标签： javascript jquery select dynamic plugins

【解决方案1】：

使用 css 增加选择的宽度。

#dropdown_users{
 width:300px !important;//some width which suits the size of the image and text
 //float:left;

}

您还可以通过将 span 或 Div 包装器添加到两个元素来为图像和文本添加左浮动。

【讨论】：

【解决方案2】：

您应该使用state.text 以及从格式函数返回的图像：

return '<img class="flag" src="uploads/' + state.text.toLowerCase() + '.jpg" />' + state.text;

供我参考，请参阅：Select 2。

【讨论】：