How to display images in dropdownlist using MVC/jQuery

Question

I need to display images in a dropdownlist whose values loaded in Controller not from DB. I google alot about it , but usually it needs to use some plug-in. Is there any other option to achieve this functionality without any plugin?

Answer 1

I know that you don't want to use a plugin BUT, read on!

There is a plugin called Select2 that provides extended functionality for Bootstrap-type dropdown lists. On the Select2 webpage there is an example that loads movies using the rotten-tomatoes api. The entries include a title, an image and a synopsis.

If you look at the page source you can see how they achieve this.

This excerpt is the javascript function that handles the returned values, and wraps them in html markup before passing them to the dropdown list.

function movieFormatResult(movie) {
    var markup = "<table class='movie-result'><tr>";
    if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
        markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
    }
    markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
    if (movie.critics_consensus !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
    }
    else if (movie.synopsis !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

As you can see each entry is in its own table and as it is html, you can easily insert images.

There is jquery + ajax to call the method on your controller. The method should return a JsonResult back to the jquery on the view and then in the Select2 example two javascript methods process the serialized json, ready for the dropdown list to handle.