在表单中提交下拉列表的值和文本

本文关键字：文本 下拉列表 表单 提交 | 更新日期: 2023-09-27 17:53:27

我使用MVC HTML Helper来呈现HTML下拉列表:

@Html.DropDownListFor(m => m.ParentId, menuSelectList)

我把这个DropDownList放在一个HTML表单中。当按下此表单中的Submit按钮时，将创建一个HTML表单数据并在POST请求中发送。该数据将包含键名ParentId，键值为DropDownList的选择值。如何将DropDownList的选择的文本包含在此数据中，关键名称为ParentName。

在表单中提交下拉列表的值和文本

1)你可以使用一个隐藏的"ParentName"输入，并填充它与选定的文本(javascript/jQuery)，当一个改变事件是你的组合(下拉列表)。

2)在提交后(在POST操作中)从键中获取值，这应该是可能的(例如db查询)。

3)构建您的selectList，以一种方式，键包含键和值(例如，由~分隔，并在POST操作中分割"key~value")

我个人倾向于第二个解决方案，但是…

你可以用JavaScript来做，因为浏览器不会将选中的文本发送到任何地方。

一个技巧是将这样的代码放在.aspx页面的最底部:(在</body>之前) 
var arrDDLs = document.getElementsByTagName("select");
for (var i = 0; i < arrDDLs.length; i++) {
    var oDDL = arrDDLs[i];
    if (!oDDL.name || oDDL.name.length === 0)
        continue;
    var inputName = oDDL.name + "_text";
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = inputName;
    input.id = inputName;
    oDDL.form.appendChild(input);
    oDDL.onchange = function () {
        var index = this.selectedIndex;
        var text = (index >= 0) ? this.options[index].text : "";
        var inputName = this.name + "_text";
        var input = document.getElementById(inputName);
        input.value = text;
    };
    //populate initial text:
    oDDL.onchange();
}

这段代码实际上是在另一个答案中实现了第一个想法，要获取选中的文本，您只需读取select键的请求值加上"_text"，例如:

string selectedText = Request.Form[m.ParentId + "_text"];

实时测试用例。(仅限JavaScript端)

相关文章：