select2 在所选选项上绘制图像和文本答案

【问题标题】：select2 draw image and text on selected optionselect2 在所选选项上绘制图像和文本
【发布时间】：2018-12-13 08:34:04
【问题描述】：

我有一个带有国旗的国家列表的 select2。显示选择，显示国旗和国家，但所选文本不显示国旗。

这是代码：

$("#cmbIdioma").select2({
	templateResult: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div>
  <select id="cmbIdioma" style="width: 200px;">
    <option value="Spain" selected>Spain</option>
    <option value="United_Kingdom">United Kingdom</option>
  </select>                            
</div>

感谢您的宝贵时间！

【问题讨论】：

我的第一个猜测是你应该把idioma.value而不是idioma.id也许吧？

标签： javascript html jquery-select2

【解决方案1】：

可以使用选项templateSelection更改所选结果模板。

将与templateResult相同的模板复制到templateSelection：

$("#cmbIdioma").select2({
	templateResult: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  },
	templateSelection: function (idioma) {
  	var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png'/> " + idioma.text + "</span>");
  	return $span;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div>
  <select id="cmbIdioma" style="width: 200px;">
    <option value="Spain" selected>Spain</option>
    <option value="United_Kingdom">United Kingdom</option>
  </select>                            
</div>

【讨论】：

工作！感谢您的宝贵时间！
很高兴能帮上忙！

【解决方案2】：

此代码用于使用服务器的 IP 地址和使用谷歌插件在下拉列表中获取带有国家/地区标志的选定国家/地区值..

         <html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
                <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
        
            </head>
            <body>
        
                <?php
        //            $ip_address = '1.7.255.255';//you can use the ip address manually like this 
                    $ip_address = $_SERVER['REMOTE_ADDR'];
                    $geopluginURL = 'http://www.geoplugin.net/php.gp?ip=' . $ip_address;
                    $addrDetailsArr = unserialize(file_get_contents($geopluginURL));
                    $country = $addrDetailsArr['geoplugin_countryName'];
                    if (!$country)
                    {
                        $country = 'Not Define';
                    }
                    echo '<strong>IP Address</strong>:- ' . $ip_address . '<br/>';
                    echo '<strong>Country</strong>:- ' . $country . '<br/>';
        
                    $url = "https://api.ipgeolocationapi.com/countries";
                    $ch = curl_init();
                    curl_setopt($ch, CURLOPT_URL, $url);
                    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 4);
                    $json = curl_exec($ch);
                    if (!$json)
                    {
                        echo curl_error($ch);
                    }
                    curl_close($ch);
        
                    $data = json_decode($json); // getting response of json in variable $data
                ?>
        
                <select id='selUser' style='width: 200px;'>
                    <?php
                        foreach ($data as $key => $value) // then to find a value of a data 
                        {
                            ?>
                            <option  <?php echo $value->name == $country ? 'selected' : null ?> value="<?php echo $value->name; ?> "  data-iconurl="https://www.countryflags.io/<?php echo $value->gec ?>/flat/64.png"> <?php echo $value->name; ?></option> 
        
                            <?php
                        }
                    ?>
                </select>  
            </body>
        </html>
        <script>
            // use template result=> for having a flag in dropdown 
            // and use selection for getting it selected flag icon with dropdown selected 
            $("#selUser").select2({
                templateResult: function (state) {
                    var iconUrl = $(state.element).attr('data-iconurl');
                    if (!state.id) {
                        return state.text;
                    }
                    var baseUrl = iconUrl;
                    var $state = $(
                            '<span><img src="' + baseUrl + '" class="img-flag" width="30px"/> ' + state.text + '</span>'
                            );
                    return $state;
                },
                templateSelection: function (state) {
                    var iconUrl = $(state.element).attr('data-iconurl');
                    if (!state.id) {
                        return state.text;
                    }
                    var baseUrl = iconUrl;
                    var $state = $(
                            '<span><img src="' + baseUrl + '" class="img-flag" height="17px"/> ' + state.text + '</span>'
                            );
                    return $state;
                }
            });
        </script>

【讨论】：