Add Image to SelectListItem label

Question

Hello! I want to populate my SelectListItem ViewBag label with an image icon from my database, but I am not sure how to do so from my controller.

As you can see from my controller codes, there is this part of the code:

List<DestinationCountries> destCountryList = _db.DestinationCountries.ToList();  
  
            IEnumerable<SelectListItem> ItemsList = from item in destCountryList  
                                                    select new SelectListItem  
                                                    {  
                                                        Value =   
                                                        Convert.ToString(item.DestCountryID),  
                                                        Text = item.DestCountryName  
                                                    }  
  
                                                    ;  
            ViewBag.ListItems = new SelectList(ItemsList, "Value", "Text");  

in the value, I am only able to return the string text of the label from my database, but I also want to return an image icon beside the text from my database.

I was thinking, is it possible to insert some html codes after Value = because it's much easier for me to ammend the codes and styles.

Below is a video of how my select list looks like now, and how i want it to be.

Immigration cshtml

@using StiWebsite.Models;  
@using System.Security.Policy  
@model dynamic  
  
@{  
    ViewData["Title"] = "Immigration";  
}  
  
<select id="products" name="products" class="form-control selectpicker" asp-items="@ViewBag.ListItems" data-content="<img id='studyTourFilterIcon' class='img-responsive icon' src='/assets/img/immigration/flag/world.png'></img>"> Select Country</select>  
  
<div id="destPart"></div>  
  
@section Scripts {  
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
<script type="text/jscript">  
    $("#products").change(function () {  
        $("#destPart").load("@Url.Action("_test1")" + "?value=" + this.value);  
    }).trigger();  
</script>  
}  

ImmigrationController

using Microsoft.AspNetCore.Mvc;  
using StiWebsite.Data;  
using StiWebsite.Models;  
using Microsoft.AspNetCore.Mvc.Rendering;  
using System.Dynamic;  
  
namespace StiWebsite.Controllers  
{  
    public class ImmigrationController : Controller  
    {  
        private ApplicationDbContext _db;  
        public ImmigrationController(ApplicationDbContext db)  
        {  
            _db = db;  
        }  
        public IActionResult Immigration()  
        {  
            dynamic immModel = new ExpandoObject();  
            immModel.immL = getImmigration();  
            immModel.countryL = getCountry();  
            List<DestinationCountries> destCountryList = _db.DestinationCountries.ToList();  
  
            IEnumerable<SelectListItem> ItemsList = from item in destCountryList  
                                                    select new SelectListItem  
                                                    {  
                                                        Value =  
                                                        Convert.ToString(item.DestCountryID),  
                                                        Text = item.DestCountryName  
                                                    }  
  
                                                    ;  
            ViewBag.ListItems = new SelectList(ItemsList, "Value", "Text");  
            return View(immModel);  
        }  
  
        public List<ImmigrationDetails> getImmigration()  
        {  
            List<ImmigrationDetails> immigration = _db.ImmigrationDetails.ToList();  
            return immigration;  
        }  
  
        public List<Country> getCountry()  
        {  
            List<Country> countryList = _db.Country.ToList();  
            return countryList;  
        }  
    }  
}  

Answer 1

Hi @Sun ,

By default, when using the <select> tag helper, we can't use it to display the select option with image icon.

To display the select option with image icon, you can try to use some JQuery Image DropDownList plugin (search "jquery image dropdown" online, there should have lots of sample or tutorials), or re-create the Dropdownlist and its select container based on the select tag, refer to the following code:

The ImageOption class:

public class ImageOption  
{  
    public string Value { get; set; }  
    public string Text { get; set; }  
    public string ImageIcon { get; set; }  
}  

Then, in the view, use the following code to display the select options, and then add the CSS style and JS scripts:

view the source code: 216802-sourcecode.txt
[Note] Since I'm using the layout page, the JQuery and Boostrap reference has been added to the layout page, if you are not using the layout page, you have to add the JQuery and Bootstrap reference.

After that, the output is like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion