Einfügen Symbol in Javascript - PHP Dropdown

Question

Ich habe ein Dropdown-Menü mit PHP und Javascript generiert. Der Code ist der folgende:

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

Es funktioniert richtig Ich kann suchen und verwenden Sie es als Dropdown.

Ich war Wunder, was die Art und Weise neben den Ergebnissen ein Symbol angezeigt wird?

zB

Das ist mein Ergebnis ist: https://i.stack.imgur.com/b2FhA.png

Und ich brauche meine Icon angezeigt werden neben Destination Titel: https://i.stack.imgur.com/Bq0Z0.png

Ich habe versucht, durch <i class="fa fa-map-marker"></i> in meinem div Zugabe aber nicht funktioniert ..

Irgendwelche Gedanken?

Answer 1

Sie nicht <i> Tag in select option verwenden können, anstatt Sie Unicode verwenden:

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

und verwenden diese css :

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

Example

OR eine einfachere Lösung wird unter Verwendung von Pseudo-Elemente:

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

Example

Answer 2

Fügen Sie die <i> innerhalb Ihrer while-Schleife wie folgt aus:

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

Answer 3

Sie können es tun, nur mit CSS, zum Beispiel:

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

Das ist Arbeit für me)