如何在我的选择2选择框中显示我选择的图标? [英] How can I show my selected icon in my select2 selectbox?
本文介绍了如何在我的选择2选择框中显示我选择的图标?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我选择一个图标时,只有文本显示在我的选择框中,而不是图标:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">$(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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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/select2@4.1.0-rc.0/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>
这篇关于如何在我的选择2选择框中显示我选择的图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文