Electronic Logic Gates

Question

I want a Drop-Down Menu (Html Select Option) with Content Countryflag + Country Name

To lower http requests i want to realize it with 1 image with all flags and display just a part from it.

i use this stripes https://www.flag-sprites.com/de/

Without html form with option list it works like:

<img src="blank.gif" class="flag flag-cz" alt="Czech Republic" />

but

<option><img src="blank.gif" class="flag flag-cz" alt="Czech Republic" /> Czech Republic</option>

is forbidden

also if i do it like this:

<option class="flag flag-cz">Czech Republic</option>

it does not give the results i want

Here is an Example how it should looks like: http://find-onlinecontacts.com

Why is the title "Electronic Logic Gates" when the question has nothing whatsoever to do with them? — Dmitri, Feb 28 '17 at 15:32

score 0 · Answer 1 · answered Feb 28 '17 at 15:45

What about this approach. It's behaviour is the same as a select but you can custumize it easily.

$("document").ready(function() {
  $(".option").click(function() {
    $(".option").slideDown();
  });

  $(".option:not(.selected)").click(function() {
    $(".option:not(.selected)").slideUp();

    $(".option.selected").text($(this).text())
    $("#selectVal").val($(this).data("value"))
  });




});

li {
  list-style: none
}

.option {
  display: none
}

.option:first-child {
  display: block
}

.option:not(.selected):hover {
  background: red
}

#select {
  border: 1px solid black;
  width: 100px;
  cursor: pointer
}

#select img{width:30px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select">
  <li class="option selected">--</li>
  <li class="option" data-value="0"><img src="http://www.flags.net/images/largeflags/SPAN0002.GIF" alt=""/>Spain</li>
  <li class="option" data-value="1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/255px-Flag_of_Portugal.svg.png" alt=""/>Portugal</li>
  
</ul>
<input id="selectVal" type="hidden" value="" />

score -2 · Answer 2 · answered Feb 28 '17 at 15:34

-2

You can use SELECT tag with Size and name method

answered Feb 28 '17 at 15:34

rasil kudu

1
2

you can't put images on a simple select – Iván Rodríguez Torres Feb 28 '17 at 15:38
Maybe an emoji of the flag – rasil kudu Feb 28 '17 at 15:40
Welcome to SO & thank you for participating in questions. As every answer posted here maybe read [& learned] by many users, please make sure you really have enough information to answer a particular question. Anyway, as the first one, you can review the [correct answer for this question here](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list#answer-2966006) – behkod Feb 28 '17 at 16:00

Electronic Logic Gates

2 Answers2