Select2 drop-down für die Länder, mit Fahnen

Nicht jemand ein einfach zu bedienen Beispiel für ein Land, drop-down, mit Länder-Flaggen, für Select2? Ich bin zu implementieren, basierend auf der diese Vorschlag, aber ich würde es vorziehen, zu vermeiden, das Rad neu erfinden.

InformationsquelleAutor dangonfast | 2013-08-07

  1. 9

    Ich ein ähnliches problem und hier ist, wie ich es lösen.

    (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);

    Ich auch ein gist über ihn und die folgenden sind die demos.

    Select2; Beispiele - Template zeigt die Flagge, wenn Sie wählen Sie ein Land wie die ausgewählte option in der non-drop-down-Sicht. Ich habe kopiert, was Sie getan haben, wie Ihr Demo 2 mit Fahnen das bedeutet jedoch nicht, zeigen Sie die fahne auf die Auswahl einer option. Wie kann ich replizieren das bitte?
    Genial Lösung - funktioniert für meine Chrome-Seite Aktion-Erweiterung
    Wenn Sie immer noch nicht behoben, ich kann sehen, einige code, mit dem, was Sie versucht haben?
    Toll. Ich bin froh darüber. Lassen Sie mich wissen, sobald Sie fertig sind Ihre Erweiterung. Ich würde es gerne sehen.

    InformationsquelleAutor Starx

  2. 5

    Dem Weg habe ich Sie:

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

    und mit der css-Bibliothek (css-und eine sprite -)
    https://www.flag-sprites.com/

    Offizielle DOC

    InformationsquelleAutor Dementic

  3. 2

    Haben Sie einen Blick auf die folgenden links.

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

    der zweite link ist tot =[
    erste link ist eine gute Bibliothek, aber es hat eine Menge bugs und es ist nicht responsive
    ja, es ist nicht responsive, aber es ist sehr hilfreich und für die Reaktionsfähigkeit, die Sie benötigen, um Sie reaktionsschnell Weg, wie ändern Sie die Breite von .dd Klasse

    InformationsquelleAutor Duleendra

  4. 1
    <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>
    Danke, aber das ist zu roh. Ich muss es noch zusammen die Bilder (jpgs, no way!), die Liste der Länder, etc. Ich war auf der Suche nach einigen javascript-Bibliothek, wo ich kann Sie einfach übergeben Sie ein array von Länder (ISO code, zum Beispiel), und ein vollständig initialisiert Select2 drop-down -, mit Fahnen.

    InformationsquelleAutor acudars

Schreibe einen Kommentar