0

I want to show a dropdown list with cities and flags. Like this (sorry example made in Excel)...

enter image description here

I tried this. But this code doesn't work.

<select id="address" class="form-control" placeholder="Address">
@foreach (var city in Model.City)
{
    <option value="@(city.Id)">@(city.Name) [<img src="~/images/'@(city.Country.CountryIsoCode3)'.png/" width="16" height="16">]</option>
}
</select>

Can someone help me?

I see something with "<select class="selectpicker">" by using Bootstrap. Which js, css files do I need exactly? I think that this could be the solution...

user1531040
  • 2,143
  • 6
  • 28
  • 48
  • I can refer to: https://stackoverflow.com/questions/4941004/ – EpsilonTal Oct 29 '21 at 07:36
  • How is it not working. Can you describe how is your code failing? Also, what is your tech stack? The code you have is not pure HTML, you use a template engine. Please specify what you are using and how is your current try failing. – Lajos Arpad Oct 29 '21 at 07:40
  • If you create a snippet and add it to your question, that would also be helpful. – Lajos Arpad Oct 29 '21 at 07:41
  • I use a model for data. And there is code like C#/Razor. – user1531040 Oct 29 '21 at 07:55
  • @user1531040 How is it failing? Do you get an error? What do you see in the browser? "Not working" is so vague that it's very difficult to understand the precise problem. This is why asked you to elaborate. – Lajos Arpad Oct 29 '21 at 07:58
  • What would you see more. It starts with a @model. And there is a label within a div. And the image will found when write the code. (wwwroot\images\) – user1531040 Oct 29 '21 at 07:58
  • I see something with – user1531040 Oct 29 '21 at 08:55

1 Answers1

3

You could consider using an emoji for this.

<select name="country">
  <option>GB </option>
  <option>FR </option>
  <option>DE </option>
</select>

https://jsfiddle.net/2mnzproa/

Barry van Driel
  • 31
  • 1
  • Thanks for your answer. But I see in your example no images. – user1531040 Oct 29 '21 at 09:00
  • It's true that on some older operating system and browsers this won't work. you can use this [website](http://caniemoji.com) as reference. In my opinion using an emoji and text is the graceful degradation way of doing this. Most users will have the optimal experience, and for users on older systems it's still useable. – Barry van Driel Oct 29 '21 at 10:13
  • It's resolved. With bootstrap (data-content). – user1531040 Oct 29 '21 at 12:57