ASP.NET MVC DropDownList：获取选定文本（而不是值）答案

【问题标题】：ASP.NET MVC DropDownList: Getting the Selected Text (rather than the Value)ASP.NET MVC DropDownList：获取选定文本（而不是值）
【发布时间】：2010-10-27 19:26:49
【问题描述】：

曾几何时，我有一个 DropDownList，其中包含使用此代码构建的选项：

<%= Html.DropDownList("SomeName", someSelectList)%>

生成这样的 HTML：

<select id="SomeName" name="SomeName">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
<option>JKL</option>
</select>

表单提交总是会通过 ModelBinding 将上述选项之一返回给我班级的公共成员“SomeName”。然后，我的内部验证代码将从内部字典中选择正确的数值。生活很好。

然后我被要求在单独的文本框中显示通过 Javascript/JQuery 选择的数值。所以现在我有以下选择：

<select id="SomeName" name="SomeName">
<option value="50">ABC</option>
<option value="10">DEF</option>
<option value="25">GHI</option>
<option value="10">JKL</option>
</select>

以及下面的 JQuery 代码：

$(document).ready(function() {
    $('#SomeName').change(function() {
        $("input#someNumber").val($('#SomeName').val());
    });
});

用户选择字符串并在框中显示数值。太好了。

现在的问题是，当Form被提交时，Model Binding得到的是数值（例如50）而不是String（例如ABC）

如何覆盖此行为并再次获取选定的字符串？

【问题讨论】：

何必呢？您之前已经根据字符串查找数字。现在你只是得到了这个数字。砍掉进行查找的代码，对更少的代码感到满意。 ...或者还有更多内容吗？
编号不唯一。某些文本选项具有相同的编号。我正在使用的模型（类）需要文本和数字。并且两者都需要在用户使用它时对用户可见。以前，我在回发后显示了号码以进行验证，但我的用户不喜欢这样，并且希望一切都是 Javascripty 光滑的。

标签： asp.net-mvc drop-down-menu html-select model-binding

【解决方案1】：

椒盐卷饼 - 尝试：

$("#SomeName option:selected").text();

事实上，上述和$("#SomeName").val(); 的组合应该可以满足您的一切需求。

干杯...

【讨论】：

我考虑过这一点，如果在浏览器上启用了 Javascript，它通常可以工作，但我在假设 javascript 可能被破坏的情况下操作。
我很困惑。我认为这个问题源于“新”要求“...显示通过 Javascript/JQuery 选择的数值”-doh :)
如果假定使用了 javascript，那么您将有很多选择。我知道我们谈论的是渐进式增强，但有些事情可能会让你陷入困境，除非制定了一些最低限度的“使用条款”。我知道这是一个艰难的方式，因为我必须将 javascript 作为我们现在正在开发的网站的要求，因为该功能变得过于严格，无法包含在“无 js”框中。当然，您的情况可能会有所不同（如果确实如此，那就太好了），但在我们的情况下，我们展示了太多的 jquery 好东西让利益相关者忽略:)
是的，好吧，谈到现代 web 2.0 开发，我有点不习惯。所以我还在弄清楚什么是现实的，什么不是。我被告知要在 Javascript 最有可能工作的假设下进行操作，但如果不能，那么应用程序最好优雅地降级。因此，我不能依赖 JS 为用户填充字段。
这很公平。在这种情况下，“side”建议可能是使用两个相关数据值对 select 的值进行编码，并在服务器端解析它们。所以像这样的东西可能是要走的路。当然，您必须解析文本框的数字才能显示给启用了 js 的用户（这仍然让我感到困惑，即在文本框中显示方面给予了特殊特权）。我会按照这个线程来看看你是如何解决它的，因为这是一个不寻常的场景。一切顺利-吉姆

【解决方案2】：

当一个表单被发布时，所选option 的值总是被回发。要获取option 的文本，您需要一个服务器端查找表来匹配数值和名称。或者，您可以将 select 更改回原来的样子，并在 JavaScript 中使用查找表来显示数值，而不是在您的选项中放置 value 属性。

【讨论】：

哇。这很糟糕。好吧，谢谢你让我知道。无论如何..我不能做服务器端的事情，因为（如我上面的原始帖子所示）数值不是唯一的。我将不得不走第二条路线，有另一个查找表并让 Javascript 对其进行操作。

【解决方案3】：

椒盐卷饼，

正如我在评论中简要提到的，如果 0.1% 的非 js 用户没有打开 js，你应该用一些“消息”来“宽限”他们。这是我在模板中紧跟<body> 标记后的内容：

<noscript>
  <div id="noscript" class="readme">
    <p>Yoursite name requires that you have javascript turned on - 
    Follow <a target="_blank" href="http://www.google.com/support/bin/answer.py?answer=23852">
    this walkthrough</a> to enable javascript</p>
  </div>
</noscript>

这可以通过使用 css nostyle 的东西来额外设置样式：

noscript{
    background-color: red;
    color: white;
    border: 2px solid white;
    font-size: 1.2em;
}

或者通过使用更好的方法为它使用定义的类：

.readme {
    background-color:#702444;
    color:#FFFFFF;
    display:block;
    margin:10px 5px;
    padding:10px;
    text-align:center;
    font-weight: bold;
    border: 6px solid #fff;
}

.readme a 
{
    color: #FFAC50;
}

等等等等……

再次欢呼

【讨论】：

嗨，吉姆，非常感谢您的跟进。我今天将把它添加到我的网络应用程序中。