如何在我的 select2 选择框中显示我选择的图标?

爱和平

当我选择一个图标时,我的选择框中只显示文本,而不是图标:

$(document).ready(function(){
  $("#social").select2({
   templateResult: formatState
  });
 });
 
 function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
   '<span ><i class="fa fa-'+ state.id +'"> ' + state.text + '</span>'
  );
  return $state;
 }
<link href="https://adminlte.io/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/plugins/select2/select2.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<script src="https://adminlte.io/themes/AdminLTE/plugins/jQuery/jquery-3.1.1.min.js"></script>
 <script src="https://adminlte.io/themes/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
 <script src="https://adminlte.io/themes/AdminLTE/plugins/select2/select2.full.min.js"></script>



<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google'>Google</option>
 <option value='vimeo'>Vimeo</option>
</select>

爱和平

$(document).ready(function(){
  $("#social").select2({
   templateResult: formatState,
   templateSelection: formatState
  });
 });
 
 function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
   '<span ><i class="fa fa-'+ state.id +'"> ' + state.text + '</span>'
  );
  return $state;
 }
<link href="https://adminlte.io/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/plugins/select2/select2.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css" rel="stylesheet"/>
<script src="https://adminlte.io/themes/AdminLTE/plugins/jQuery/jquery-3.1.1.min.js"></script>
 <script src="https://adminlte.io/themes/AdminLTE/bootstrap/js/bootstrap.min.js"></script>
 <script src="https://adminlte.io/themes/AdminLTE/plugins/select2/select2.full.min.js"></script>



<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google'>Google</option>
 <option value='vimeo'>Vimeo</option>
</select>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在jQuery select2远程选择框中设置默认选定值的顺序?

来自分类Dev

如何从外部列表框中控制select2选择框?

来自分类Dev

如何在 Select2 上使用动态选择?

来自分类Dev

如何从select2多重选择的选项列表中删除选择的选项,并按选择的顺序显示选择的选项

来自分类Dev

如何在jQuery的select2中的2个选择框之间更改选定的选项元素?

来自分类Dev

Select2:如何在 Select2 中获得自定义排序

来自分类Dev

我如何在此select2表单上添加额外的字段

来自分类Dev

如何在kartik Select2 Yii2中允许选择输入的任何标签?

来自分类Dev

如何在kartik Select2 Yii2中允许选择输入的任何标签?

来自分类Dev

如何从dom中删除select2

来自分类Dev

如何在select2插件中设置选择值-jQuery

来自分类Dev

如何在select2中更改占位符?

来自分类Dev

如何在Select2中使用“标签”

来自分类Dev

如何在Select2中插入FontAwesome

来自分类Dev

如何在Select2中首先设置占位符

来自分类Dev

如何在litelement中实现select2

来自分类Dev

如何在 Laravel 中实现 select2

来自分类Dev

select2如何忽略某些选择器

来自分类Dev

选择select2的allowClear选项时如何捕获事件?

来自分类Dev

如何使用“ Select2”预先选择值

来自分类Dev

选择后如何保留Select2结果?

来自分类Dev

jQuery select2如何使选择后不关闭

来自分类Dev

如何避免在select2 gem中选择提示

来自分类Dev

如何获得select2的值:取消选择

来自分类Dev

select2如何忽略某些选择器

来自分类Dev

如何使用选择的选项克隆select2?

来自分类Dev

我无法捕获select2中的Enter键

来自分类Dev

如何自定义jquery select2插件-选择框的jQuery替换

来自分类Dev

在搜索框外显示select2多项选择

Related 相关文章

  1. 1

    如何在jQuery select2远程选择框中设置默认选定值的顺序?

  2. 2

    如何从外部列表框中控制select2选择框?

  3. 3

    如何在 Select2 上使用动态选择?

  4. 4

    如何从select2多重选择的选项列表中删除选择的选项,并按选择的顺序显示选择的选项

  5. 5

    如何在jQuery的select2中的2个选择框之间更改选定的选项元素?

  6. 6

    Select2:如何在 Select2 中获得自定义排序

  7. 7

    我如何在此select2表单上添加额外的字段

  8. 8

    如何在kartik Select2 Yii2中允许选择输入的任何标签?

  9. 9

    如何在kartik Select2 Yii2中允许选择输入的任何标签?

  10. 10

    如何从dom中删除select2

  11. 11

    如何在select2插件中设置选择值-jQuery

  12. 12

    如何在select2中更改占位符?

  13. 13

    如何在Select2中使用“标签”

  14. 14

    如何在Select2中插入FontAwesome

  15. 15

    如何在Select2中首先设置占位符

  16. 16

    如何在litelement中实现select2

  17. 17

    如何在 Laravel 中实现 select2

  18. 18

    select2如何忽略某些选择器

  19. 19

    选择select2的allowClear选项时如何捕获事件?

  20. 20

    如何使用“ Select2”预先选择值

  21. 21

    选择后如何保留Select2结果?

  22. 22

    jQuery select2如何使选择后不关闭

  23. 23

    如何避免在select2 gem中选择提示

  24. 24

    如何获得select2的值:取消选择

  25. 25

    select2如何忽略某些选择器

  26. 26

    如何使用选择的选项克隆select2?

  27. 27

    我无法捕获select2中的Enter键

  28. 28

    如何自定义jquery select2插件-选择框的jQuery替换

  29. 29

    在搜索框外显示select2多项选择

热门标签

归档