如何在下拉列表中使用对象属性作为选项工具提示？答案

【问题标题】：How to use object properties in dropdownlistfor option tooltips?如何在下拉列表中使用对象属性作为选项工具提示？
【发布时间】：2023-04-10 23:26:01
【问题描述】：

经过大量不成功的搜索，我希望你们能在这里帮助我......

我所知道的：可以通过

为下拉列表选项生成工具提示

<script type="text/javascript">
    $(function () {
       $("#someDropDownForList option").each(function () {            
       $(this).attr({ 'title': $(this).html() });
       });
    });
</script>

但是，就我而言，我想向用户提供有关选项的更多信息

<html>    
   <body>
      <div>
      @Html.DropDownListFor(
      m => m.SomeModelProperty,
      new selectList(Model.ListWithObjects, "Property1", "Property1"),
      new { @id="someDropDownForList"})
      </div>
   </body>
</html>

如何使用 jquery 来使用 Property2 和 Property3 为每个选项构造一个工具提示文本？

Property1 + " has: " + Property2 + " and " Property3

致以诚挚的问候，

保罗

编辑：没有 jquery 的解决方案

<div>
   <select id="someDropDownForList ">
   @foreach(var item in Model.ListWithObjects)
   {
   <option title="Some property is the @item.Property2: with the @item.Property3">
       @item.Property1
   </option>        
   }        
   </select>
</div>

【问题讨论】：

但是什么是 "property2" 和 "property3" ？ new SelectList()中的第二个参数是<option>的值，第三个是文本...
很抱歉没有提供这些信息。 Model.ListWithObjects 由具有三个（字符串）属性的对象组成：Property1、2 和 3。因此下拉列表显示了属性 1 的字符串值，我想在其中使用工具提示中剩余的 2 个属性。
使用 var 应该可以工作......我可以做类似 var Property2 = '@Model.ListWithObjects[0].Property2' 的事情，但我无法用各种索引替换 0（如：var index = $(this).index();）......有什么想法吗？
好吧，你不能从客户端（javascript）访问Model.ListWithObjects。您必须以某种方式在 html 中输出数据。最好的地方是在<option> 上添加一些数据属性，但Html.DropDownList 助手不允许自定义<option> 的输出

标签： c# jquery asp.net-mvc-3

【解决方案1】：

提供的帮助器Html.DropDownListFor 只允许通过IEnumerable<SelectListItem> selectList 参数绑定<option> 文本和值（正如您所做的那样）。

问题是您无法从客户端 javascript 访问模型中的其他属性。 Javascript 不知道您的 C# 对象。

我认为正确的方法是生成以下 HTML：

<select>
    <option value="ValueProperty1" title="Property1 has: Property2 and Property3">TextProperty1</option>
    ...
</select>

你甚至不需要任何 jquery。

如何做到这一点？我认为您最好通过扩展 SelectListItem 并创建一个新的辅助方法来生成 DropDownList 来实现一个可靠的解决方案。

以下答案正是这样做的：Adding html class tag under in Html.DropDownList

【讨论】：

谢谢你，我想知道一个 jquery 解决方案是否可行（也用于教育目的；））。我已经转移到一个 foreach 循环，以至少获得渴望的功能。为了完整起见，我在原始帖子中添加了一个 sn-p。