c# - 带有图像和标签的 MVC Razor 下拉列表？

Question

我想知道有没有办法在 MVC 剃须刀中使用 @Html.DropDownListFor 助手列出图像和标签？像这样的东西：

_{（来源：dotnetspeaks.com）}

Answer 1

MVC 中没有内置这样的东西，但我确信有很多 3rd-party 组件。我个人将dijit用于此类事情，但由于您将 JQuery 作为您的标签之一，您可能可以使用JQuery UI中的Menu。

Answer 2

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

看看这个教程，这将帮助您创建带有图像的下拉列表。

Answer 3

看这里。是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显示图像。它对我有用