1

I'm trying to achieve a very common scenario whereas given a list of options to choose from, the last one says "Other" and when selected the user is presented with the input field to specify what "other" is.

在我的例子中，它是一个人的头衔列表：

public List<string> TitleList
{
    get
    {
        return new List<string> { "Mr", "Mrs", "Miss", "Dr", "Other" };
    }
}

我想要做的是：

@Html.DropDownListFor(m => m.Title, new SelectList(Model.TitleList), "Please select...") @Html.TextBoxFor(m => m.Title)

我希望模型在 DropDownLis 中选择“Other”时绑定 TextBox 值，并在所有其他情况下绑定到 DropDownList 中的选定项目。

这是否可以在不在模型上添加额外属性的情况下实现？

4

3 回答 3

1

更好的解决方案不是绑定到两个字段，而是使用一些巧妙的 javascript 将下拉列表中的选定项目复制到绑定文本框中：

@Html.DropDownList("ddlTitle", new SelectList(Model.TitleList), "Please select")
@Html.TextBoxFor(m => m.Title, new { maxLength = 10 })

Javascript：

ToggleTitleFields = function () {
    var title, txtTitle;
    title = $('select#ddlTitle').val();
    txtTitle = $('input#Title');
    if (title === "Other") {
        txtTitle.val("");
        txtTitle.show();
        return txtTitle.focus();
    } else {
        txtTitle.hide();
        txtTitle.val(title);
        return $('span[data-valmsg-for="Title"]').empty();
    }
};

$(document).on("change", "select#ddlTitle", function(e) {
    return ToggleTitleFields();
});

希望这可以帮助某人

于 2012-05-31T09:34:17.573 回答
0

找到了客户端解决方案：从 DropDownList 添加/删除“名称”属性。这是我的咖啡脚本：

ToggleTitleFields = () ->
    if $('select#Title').val() == "Other"
        $('select#Title').removeAttr('name')
    else
        $('select#Title').attr('name','Title')
于 2012-05-29T11:01:50.247 回答
0

沙皇，

老实说，这不是我以前必须处理的情况，但仍然是一个很好的情况。如果我面临这种困境并被允许使用 javascript 解决方案，我会在选择其他时显示一个以前“隐藏”的文本框。然后，用户必须在这个 texbox 中输入新值，失去焦点时它将填充选择列表并被选中。然后，当提交表单时，您将拥有这个新值仍然作为现有模型的一部分。

当然，您也可以在选择其他时执行类似的逻辑来显示文本框，但这次，在 httpost 控制器操作上执行一些逻辑以确定是否选择了“其他”项目，然后从“文本框”填充模型价值。

当然，这两种情况都需要大量验证，但原则上，任何一种方法都“有效”

于 2012-05-29T11:02:03.680 回答