MVC剃刀下拉列表与图像和标签？

我想知道有没有一种方法可以在MVC剃须刀中使用@ Html.DropDownListFor助手来列出图像和标签？事情是这样的：MVC剃刀下拉列表与图像和标签？

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

2013-03-11 TerryLi

不符合标准助手，因为它只呈现特定的一组HTML。看看[** jquery image dropdown **]（http://www.marghoobsuleman.com/jquery-image-dropdown）可能会有所帮助。 – Nope 2013-03-11 22:25:33

无论MVC如何，这将是一个HTML问题。 SO问题的可能重复[**放置图像与选项在一个下拉列表**]（http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a然后呢？ – Nope 2013-03-11 22:29:12

有没有像这样内置到MVC，但我敢肯定有很多第三方组件。我个人使用dijit来处理这种事情，但是由于您将JQuery作为您的标记之一，因此您可以使用JQuery UI中的Menu。

来源

2013-03-11 22:25:02

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

看看this tutorial，这将帮助您创建包含图像的下拉列表。

来源

2015-04-28 02:47:44 Irfan

-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来显示图像。它适用于我

来源

2017-05-05 11:29:02 Diego

这是如何适用于@ Html.DropDownListFor？ – Darkloki 2017-08-08 13:55:34

你鸵鸟政策，则应该使用 – Diego 2017-08-08 16:18:56

MVC剃刀下拉列表与图像和标签？

回答

相关问题