Image in select

Asked

Viewed 322 times

0

I have a language select and I would like to leave flags instead of words, I searched and saw that this is not possible, I would have to redo the select using div and span. My doubt is how I do it.

<div class="idiomaescolha1">
  <select ng-model="vm.form.produto.idioma1" id="idioma1" class="campoHora input-lg">
    <option value=""></option>
    <option value="POR" style="background-image:url('./XN3hWOM.png');" aria-hidden="true">{{'MSG.PORTUGUES'| translate}}</option>
    <option value="ESP" style="background-image:url('/assets/images/flags/4x3/es.svg');" aria-hidden="true">{{'MSG.ESPANHOL'| translate}}</option>
    <option value="ING" style="background-image:url('/assets/images/flags/4x3/us.svg');" aria-hidden="true">{{'MSG.INGLES'| translate}}</option>
  </select>
</div>
javascript html5 css3

  • Your doubt is how to do with div or span? has to be in mode select?

  • At first how to do with Divs and spans, but if there was some way with the select itself will be even better.

  • Only in the Firefox, to support all browsers you will need to use yes div

  • And how would I do it with div, my main problem is the use of ng-model.

  • Why the use of ng-model?

  • I don’t use angular, but use vue, I’ll give you an example based, and you adapt according to your need, any difficulty tells me that I try to help you.

  • Because if the server returns me a language the select will be filled automatically and will be disabled, otherwise return nothing the user will have the option to edit the language.

  • From a glance at my answer, I found several ways but tried to share what I found easier.

Show 3 more comments

1 answer

1


I researched and found several ways to do this, I will put here the one I found most practical, using HTML, CSS, JQuery.

Reference with tutorial: Reinventing a drop down with css and jquery

Basically you will use <a> and <span> to display your "select" and at the end assign the selected value to a <input type="hidden" /> to be able to manipulate the will and submit to the server-side.

Follow below working example:

$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#idiomaSelecionado").val(
      getSelectedValue("sample")
    );
    
    console.log(
      'Idioma selecionado:' + getSelectedValue("sample")
    );
});

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
        $(".dropdown dd ul").hide();
});

$(".dropdown img.flag").toggleClass("flagvisibility");
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}
        
        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
        .dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}
        
        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<dl id="sample" class="dropdown idiomaescolha1">
    <dt><a href="#"><span>Selecione</span></a></dt>
    <dd>
        <ul>
           <li>
            <a href="#">
              <img class="flag" src="https://image.flaticon.com/icons/png/128/206/206597.png" alt="" width="16" height="16" />
              <span class="value">POR</span>
              Português
            </a>
           </li>
           <li>
              <a href="#">
                <img class="flag" src="https://image.flaticon.com/icons/png/128/206/206724.png" alt="" width="16" height="16" />
                <span class="value">ESP</span>
                Espanhol
              </a>
           </li>
           <li>
            <a href="#">
              <img class="flag" src="https://image.flaticon.com/icons/png/128/206/206626.png" alt="" width="16" height="16" />
              <span class="value">ING</span>
              Inglês
            </a>
           </li>
        </ul>
    </dd>
</dl>
<input type="hidden" id="idiomaSelecionado" value="" />

  • Great, exactly this, now I will try to change to enable editing or completion.

  • I’m glad it helped, if you get impatient with editing, it opens a new question that I or other users will help you.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.