CODEWITHSUNDEEP
iconsjquery-select2
peace_love
peace_love

Reputation: 6461

How can I show my selected icon in my select2 selectbox?

When I select an icon only the text is displayed in my selectbox, not the icon:

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

Upvotes: 1

Views: 597

Answers (1)

peace_love
peace_love

Reputation: 6461

$(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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.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>

Upvotes: 2

Related Questions