在Javascript中插入图标​​ - PHP下拉列表

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>

它工作正常我可以搜索并将其用作下拉列表。

我很想知道在结果旁边显示一个图标的方式是什么？

e.g

这是我的结果：https://i.stack.imgur.com/b2FhA.png

我需要在目标标题旁边显示我的图标： https://i.stack.imgur.com/Bq0Z0.png

我尝试在我的div中添加<i class="fa fa-map-marker"></i>，但无法正常工作..

有什么想法吗？

Answer 1

在你的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 2

您无法在<i>中使用select option代码，而是可以使用 unicode ：

 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 3

你可以只使用css来做，例如：

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

这对我有用）