如何將圖標追加到列表中？

我想附加一個圖標到我的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>

我只是想知道，爲什麼不顯示圖標...

來源

2017-06-14 Jarla

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

來源

2017-06-14 12:26:08 Jarla

如何將圖標追加到列表中？

回答

相關問題