web-dev-qa-db-ja.com

国のSelect2ドロップダウン、フラグ付き

Select2について、国のフラグが付いた、使いやすい国のドロップダウンの例を誰かが持っていますか？ this の提案に基づいて実装しようとしていますが、車輪の再発明は避けたいと思います。

javascriptjquery-select2
7
dangonfast

私は同様の問題に取り組んでいました、そしてこれが私がそれを解決する方法です。

(function($) {
    $(function() {
        var isoCountries = [
            { id: 'AF', text: 'Afghanistan'},
            ...
        ];
        //Assuming you have a select element with name country
        // e.g. <select name="name"></select>

        $("[name='country']").select2({
            placeholder: "Select a country",
            data: isoCountries
        });
    });
})(jQuery);

私もそれについて 要点 を作成しました。以下はデモです。

11
Starx

私がそれをした方法：

<div class="form-group">
    <label class="control-label">Destination</label>
    <input type="text" name="cdCountry" class="form-control" required />
</div>

<script>
    $("[name='cdCountry']").select2({
        placeholder: "Select a country",
        formatResult: function (country) {
            return $(
              "<span><i class=\"flag flag-" + country.id.toLowerCase() + "\"></i> " + country.text + "</span>"
            );;
        },
        data: yourDataSource
    });
</script>

そしてcssライブラリ（cssとスプライト）を使用する https://www.flag-sprites.com/

公式DOC

5
Dementic

次のリンクをご覧ください。

http://www.marghoobsuleman.com/countries-dropdown-flagshttp://vincentlamanna.com/BootstrapFormHelpers/country.html

2
Duleendra
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { $("#e1").select2(); });
    </script>
</head>
<body>
    <select id="e1">
        <option value="1">Albania<img src="Albania.jpg"></option>
        ...
        <option value="2">Germany<img src="Germany.jpg"></option>
    </select>
</body>
1
acudars