Skip to content

Instantly share code, notes, and snippets.

@leonidaswander

leonidaswander/Bandeira Imagem em Select Option

Created November 20, 2018 22:34
Show Gist options
  • Save leonidaswander/79f4caca28084d6d1b1a18a946fdc444 to your computer and use it in GitHub Desktop.
Save leonidaswander/79f4caca28084d6d1b1a18a946fdc444 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. leonidaswander renamed this gist Nov 20, 2018. 1 changed file with 0 additions and 0 deletions.
    0 index.html → Bandeira Imagem em Select Option
    View file
    File renamed without changes.
  2. leonidaswander created this gist Nov 20, 2018.
    42 changes: 42 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

    <label for="brand">Bandeira do Cartão</label>
    <select id="frm_brand" required style="width:100%;">
    <option value="" selected>Selecione um bandeira</option>
    <option value="visa">Visa</option>
    <option value="mastercard">MasterCard</option>
    <option value="jcb">JCB</option>
    <option value="diners">Diners</option>
    <option value="amex">Amex</option>
    <option value="elo">Elo</option>
    <option value="aura">Aura</option>
    </select>
    <script>

    function formatState (state) {
    if (!state.id) {
    return state.text;
    }
    var baseUrl = "img"; //Na pasta em questão adicione as imagens. Cada imagem deverá ter o nome igual ao value correspodente no option
    var $state = $(
    '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
    };

    $("#frm_brand").select2({
    templateResult: formatState
    });

    </script>

    <style>
    .img-flag
    {
    width:25px
    }
    </style>