Question

我想在我的select2选项字段中附加一个图标，这只是li元素。

$(".select2").select2({
  templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});



$( ".yellow" ).append('<i class="fa fa-adn"></i>ok');

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green }
.pink { background-color: pink }

<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 class="select2 pink">
  <option value="AL" class="yellow">Icon: </option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green" selected>Arizona</option>
</select>



<li class="select2-results__option yellow select2-results__option--highlighted" id="select2-pxyk-result-h0cm-AL" role="treeitem" aria-selected="false">Icon: </li>

我只是想知道为什么没有显示图标...

Answer 1

$(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>

如何将图标附加到列表中？

1 个答案: