Question

我有一个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>

感谢您的时间！

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

Answer 2

此代码用于使用服务器的IP地址以及使用Google插件..在带有国家标记的下拉列表中获取所选国家/地区值。

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

select2在所选选项上绘制图像和文字

2 个答案: