Question

我想知道有没有办法在MVC razor中使用@ Html.DropDownListFor帮助列出图像和标签？像这样：

a busy cat http://www.dotnetspeaks.com/ArticleImages/DropDownList%20with%20images.png

Answer 1

MVC中没有这样的内容，但我确信有很多第三方组件。我个人使用dijit作为此类事情，但由于您将JQuery作为其中一个标记，因此您可以使用Menu中的JQuery UI。

Answer 2

DropDownListFor呈现<select>。此HTML元素不支持列表中的图像。您将需要使用JavaScript库来获得此效果。一些库使用<select>作为基础（它们隐藏了select但是从中获取值。）有几十个选择的替换库。

查看this tutorial，这有助于您创建包含图片的下拉列表。

Answer 3

看here。它是jquery，很容易实现几行

<link rel="stylesheet" type="text/css" href="../Scripts/msdropdown/dd.css" />
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery.dd.js"></script>

    <div>
        <select name="webmenu" id="webmenu">
            <option value="calendar" title="~/Content/Images/arrow.png">Calendar</option>
            <option value="shopping_cart" title="~/Content/Images/SendtoFriend.jpg">Shopping Cart</option>
            <option value="cd" title="~/Content/Images/facebook.png">CD</option>
            <option value="email" title="~/Content/Images/Email.png">Email</option>
            <option value="faq" title="~/Content/Images/VotePositive.png">FAQ</option>
            <option value="games" title="~/Content/Images/VoteNegative.png">Games</option>
        </select>  
    </div>
<script type="text/javascript">
        $(document).ready(function () {
            $("#webmenu").msDropDown();
        });
   </script>

为了工作。我必须改变一点..我更喜欢使用title来显示图像。它对我有用

带图像和标签的MVC Razor下拉列表？

3 个答案: