在Javascript中插入圖標​​-PHP dropdown

Question

我有一個由php和javascript生成的下拉菜單。代碼如下：

<script type="text/javascript"> 
    $(document).ready(function() { 
    <?php $query = "sp_region_info 0"; 
    $select_region_query = sqlsrv_query($con, $query); 
    while ($row = sqlsrv_fetch_array($select_region_query)) { 
     $region_id = $row['region_id']; 
     $region_name = $row['region_name']; 
     $result_array[]= $region_name; 
    } 
    $json_array = json_encode($result_array); 
    ?> 
    var country = <?php echo $json_array; ?>; 
    $("#region").select2({ 
     data: country 
    }); 
}); 
</script> 

<div class="input-group col-sm-3 search"> 
    <label class="bd-form-label">Destination</label> 
    <select id="country"></select> 
</div> 

它工作正常我可以搜索並將其用作下拉菜單。

我很好奇最近顯示圖標的方式是什麼？

如

這是我的結果：https://i.stack.imgur.com/b2FhA.png

，我需要在下一個顯示我的圖標到目的地標題： https://i.stack.imgur.com/Bq0Z0.png

我試圖通過添加<i class="fa fa-map-marker"></i>我的股利，但不工作裏面..

有什麼想法？

Answer 1

不能在select option使用<i>標籤，而是可以使用統一：

while ($row = sqlsrv_fetch_array($select_region_query)) { 
     $region_id = $row['region_id']; 
     $region_name = $row['region_name'] . ' '; 
     $result_array[]= $region_name; 
    } 

，並使用此css ：

.select2-results__option { 
    font-family: 'FontAwesome', 'Tahoma' 
} 

Example

或簡單的解決方案是使用僞元素：

.select2-results__option::after { 
    content: "\f041"; 
    font-family: FontAwesome; 
} 

Example

Answer 2

while循環中添加<i>這樣的：

while ($row = sqlsrv_fetch_array($select_region_query)) { 
     $region_id = $row['region_id']; 
     $region_name = $row['region_name'].''; 
     $result_array[]= $region_name; 
    } 

Answer 3

你可以使用CSS做，例如：

.select2-results__option:after { 
    content: '\F041'; 
    font-family: FontAwesome; 
    font-size: 20px; 
    color: pink; 
} 

這適用於我）