如何使用MVC/jQuery在下拉列表中显示图像

Question

我需要在下拉列表中显示图像，其值不是从数据库加载到控制器中的。我谷歌很多关于它，但通常需要使用一些插件。没有任何插件可以实现这个功能吗？

Answer 1

我知道你不想使用插件但是，请继续阅读！

有一个名为Select2的插件，为Bootstrap类型的下拉列表提供了扩展功能。在Select2 webpage有一个使用烂番茄api加载电影的例子。这些条目包括标题，图像和简介。

如果你看看页面的源代码，你可以看到他们是如何实现这一目标的。

这段摘录是处理返回值的javascript函数，并在将它们传递到下拉列表之前将它们包装在html标记中。

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; 
} 

正如你可以看到每个条目都在它自己的表中，因为它是html，所以你可以很容易地插入图像。

有jquery + ajax调用你的控制器上的方法。该方法应该返回一个JsonResult回到视图上的jquery，然后在Select2示例中，两个JavaScript方法处理序列化的json，准备好下拉列表来处理。