根据下拉选择改变输入控件的类型？答案

【问题标题】：Vary type of input control based on drop down selection?根据下拉选择改变输入控件的类型？
【发布时间】：2012-02-12 21:27:51
【问题描述】：

我正在构建一个编辑屏幕，用户可以在其中编辑数据行。其中一个字段由下拉列表表示，另一个是名为“值”的输入字段。现在，根据下拉列表中的值，我需要为值输入控件设置不同类型的输入控件。有时它应该是一个文本框，其他的应该是一个日期时间控件（html5 和/或 jqUI 日期选择器），最后是一个包含一组固定值（'Yes' / 'No'）的下拉列表。

所以基本上有时我需要接受任何字符串数据，有时是日期，有时是布尔值（但带有选择框，而不是复选框）。实现这一点的最佳选择是什么？理想情况下，当用户在此编辑页面上时，输入的值不会从一种输入移动到另一种输入。在回发时，我有一个要存储的数据库值（它是一个 sql_variant）。

另外，我使用的是 asp.net mvc3，因此理想的解决方案将适用于普通的 Html.ValidateFor 和 Html.ValidationMessageFor 方法。

【问题讨论】：

你能发布代码吗？您可以通过简单地更改 HTML 来更改输入类型。没有代码很难回答这个问题。
@natemrice 没有可发布的代码。我还没有写这个，我想问这个问题，以防止我走上一条最终可能会很痛苦的道路。
@Andy 你想提交这个表单吗？没什么大不了的。只需将编辑字段放在表单中，它们都会被发送。我会更新我的答案

标签： asp.net asp.net-mvc-3 html jquery-ui

【解决方案1】：

在 JSFiddle 工作了很多时间之后，我提出了这个解决方案。而且我认为这很酷。这并不难。您可以根据需要对其进行调整。只需点击here。

基本上我用变量来表示可能的值。然后我创建一个变量来保存活动元素。

每当类型选择器发生变化时，它都会调用change() 函数，该函数使用if() 语句来检查选择了什么，然后相应地设置活动元素。

最后，它调用hide() 函数来隐藏非活动元素。

这里是updated version

红色警报：我意识到这在 FF 中不起作用（可能只是我的浏览器，但无论如何）。所以我修复了它here

【讨论】：

我已更新我的答案以包含一些附加信息。到目前为止，这两个答案都很有帮助，但都没有，这是我的错，因为没有包含足够的细节。
这个答案几乎正是我最终所做的。唯一的调整是我用来绑定模型的 Value 属性的隐藏字段，当当前可见控件发生更改时，我将数据复制到其中。
@Andy 谢谢你给我赏金

【解决方案2】：

我完成这样的事情的典型方法是在数据库中为每种不同类型的值实际存储 3 个不同的字段。然后我创建类似于以下 html 的内容：

<!-- Input type selector  -->
<div class="cell variable-selector">
    <select><option ...</select>
</div>
<!-- varied input -->
<div class="cell variable show-text">
    <div class="text"><input type="textbox"></div>
    <div class="date-picker"><input type="textbox" class="datepicker"></div>
    <div class="drop-down-bool"><select><option ...</select>
</div>

然后我有 css，它根据单元格的类隐藏或显示正确的输入元素：

div.variable div { display:none }
div.show-text div.text { display: inline }
div.show-date-picker div.date-picker {display: inline }
div.show-drop-down-bool div.drop-down-bool {display: inline}

最后，您可以设置一些 javascript，以便在更改变量选择器时更改变量单元格的类。哪个 jquery 可能会这样做：

$(document).ready(function() {
    var variableSelector = $("div.variable-selector > select");
    variableSelector.change(function() {
        var type = $(this).text();
        var class = "cell variable show-" + type;
        var variableCell = $(this).parent().parent().find("variable");
        variableCell.attr("class", class);

    })
});

作为一个快速警告，我在堆栈溢出编辑器窗口中即时编写了上述代码，因此可能存在一些语法错误或某处的小错误，但基本想法应该有效。希望能帮助到你。 --亚当

【讨论】：

谢谢，这很有帮助。我假设我们还需要在提交时将隐藏输入的值清空，否则即使控件被隐藏，我们也会在控件中获取值。
实际上我并没有删除我保存所有三个的值，还保存了变量选择器的值。然后，如果用户在以后切换回来，他们的旧值仍然存在。
我已更新我的答案以包含一些附加信息。到目前为止，这两个答案都很有帮助，但都没有，这是我的错，因为没有包含足够的细节。

【解决方案3】：

如果您想充分利用 mvc3 验证，请考虑这种方法。

型号

public class MultiValueViewModel
{
    [Required]
    public string TextValue { get; set; }

    [Required]
    public bool? BooleanValue { get; set; }

    public MultiValueType ValueType { get; set; }
}

public enum MultiValueType
{
    Text,
    Boolean
}

查看

@model MultiValueViewModel
@Html.DropDownListFor(m => m.ValueType, new SelectList(new[]
{
    MultiValueType.Text,
    MultiValueType.Boolean
}), new { @id = "multi_value_dropdown" })
<p>
<div data-type="@MultiValueType.Text" class="multi-value-pane">
    @Html.EditorFor(m => m.TextValue)
</div>
<div style="display: none" data-type="@MultiValueType.Boolean" class="multi-value-pane">
    @Html.DropDownListFor(m => m.BooleanValue, new SelectList
            (new [] {
                new SelectListItem { Text = "Yes", Value = "true"},
                new SelectListItem { Text = "No", Value = "false"}
            }, "Value", "Text"), optionLabel: "[Not Set]")
</div>
</p>

Javascript：

<script type="text/javascript">
$(function () {
    $("#multi_value_dropdown").change(function () {
        var value = $(this).val();
        $(".multi-value-pane").each(function () {
            $(this).css("display", value == $(this).attr("data-type") ? "block" : "none");
        });
    });
})

在您的控制器内，接收 MultiValueViewModel 值（单独或在父模型内），并根据选定的 ValueType 保存到数据库。请注意，如果您需要跳过对隐藏字段（例如 :hidden）的验证，则需要 jquery.validate 版本 1.9。

【讨论】：