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

Question

我需要在下拉列表中显示图像，其值在控制器中加载而不是从数据库中加载。我google了很多关于它，但通常它需要使用一些插件。是否有任何其他选项可以在没有任何插件的情况下实现此功能？

Answer 1

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

有一个名为 Select2 的插件，它为 Bootstrap 类型的下拉列表提供了扩展功能。在 Select2 webpage 上有一个使用 rotten-tomatoes 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，准备好处理下拉列表。