与jQuery的图像

Question

选择我使用jQuery插件选择2，这是我的第一选择：

$('#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; } 

}); 

发生了什么：正确显示

1. 的图像。

2. 图片旁边的文字消失了。

为什么？任何人都可以帮助我解决这个问题？问候！！

Answer 1

使用css增加select的宽度。

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

} 

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

Answer 2

您应该使用state.text与图像从格式函数返回沿：

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

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