如何使用MVC/jQuery在下拉列表中显示图像
答
我知道你不想使用插件但是,请继续阅读!
有一个名为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,准备好下拉列表来处理。
可能dublicate:http://*.com/questions/2965971/how-to-add-a-images-in-select-list – 2013-02-15 12:21:00