Select2 déroulante pour les pays, avec des drapeaux

Est-ce que qqn ont un facile à utiliser l'exemple d'un pays déroulante, avec des drapeaux de pays, pour Select2? Je suis sur le point de mettre en œuvre l'une basée sur cette suggestion, mais je préfère éviter de réinventer la roue.

OriginalL'auteur dangonfast | 2013-08-07

  1. 10

    Je travaillais sur un problème similaire et voici comment je le résoudre.

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

    J'en ai également fait un gist sujet et le suivant sont les démos.

    Le Select2; Exemples de Templates montre le drapeau lorsque vous choisissez un pays comme l'option sélectionnée dans la non-drop-down vue. J'ai copié ce qu'ils ont fait, similaire à votre Demo 2 avec des drapeaux toutefois, cela ne pas montrer le drapeau sur le choix d'une option. Comment puis-je reproduire cette s'il vous plaît?
    Génial solution qui fonctionne pour mon Chrome action de la page de l'extension
    Si vous n'avez pas encore fixé, je peux voir des code avec ce que vous avez tenté de le faire?
    Grand. Je suis heureux. Permettez-moi de savoir une fois que vous avez terminé votre extension. Je voudrais le voir.

    OriginalL'auteur Starx

  2. 5

    Je l'ai fait:

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

    et en utilisant le css de la bibliothèque (css et un sprite)
    https://www.flag-sprites.com/

    Officiel DOC

    OriginalL'auteur Dementic

  3. 2

    Avoir un regard sur les liens suivants.

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

    le deuxième lien est mort =[
    premier lien est une bonne bibliothèque, mais il a beaucoup de bugs et elle n'est pas sensible
    oui elle n'est pas sensible, mais il est très utile et pour la réactivité nécessaire pour les rendre sensibles comme le changement de la largeur de .classe dd

    OriginalL'auteur 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>
    Merci, mais c'est trop cru. J'ai encore besoin de mettre ensemble les images (jpg, no way!), la liste des pays, etc. Je cherchais un peu de javascript (bibliothèque où je peux simplement passer un tableau de pays (code ISO, par exemple), et d'un initialisé Select2 déroulante, avec des drapeaux.

    OriginalL'auteur acudars