基于下拉选择的不同类型的输入控件？

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

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

另外，我使用的是asp.net mvc3，所以一个理想的解决方案将使用正常的Html.ValidateFor和Html.ValidationMessageFor方法。

来源

2012-02-12 Andy

你可以发布代码吗？您只需更改HTML即可更改输入类型。没有代码很难回答这个问题。 – 2012-02-17 03:48:59

@natemrice没有可发布的代码。我还没有写下这个问题，我想问一个问题，让我不要走上一条可能会让人痛苦的道路。 – Andy 2012-02-17 16:20:07

@你想以表格的形式提交吗？没什么大不了。只需将编辑字段放在表单中，它们将全部发送。我会更新我的答案 – 2012-02-19 19:48:56

在JSFiddle大量时间后，我提出了这个解决方案。我觉得这很酷。这并不是那么难。你可以根据自己的需要进行调整。只需点击here。

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

只要类型选择器发生变化，它就会调用change()函数，该函数使用if()语句来检查所选内容，然后相应地设置活动元素。

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

这里是updated version

RED ALERT：我意识到了这一点并没有在FF工作（也许这只是我的浏览器，但不管）。所以我固定它here

来源

2012-02-19 01:52:30

我已更新我的答案以包含一些其他信息。这两个答案到目前为止都很有帮助，但都不是那样，这是我的错，因为没有包含足够的细节。 – Andy 2012-02-19 14:43:14

这个答案几乎就是我最终做的。唯一的调整是我用来绑定模型的Value属性的隐藏字段，并且当当前可见的控件更改时，我将数据复制到它中。 – Andy 2012-02-21 02:00:47

@安迪谢谢你赐给我赏金 – 2012-02-21 02:31:36

我完成类似这样的典型方法是在数据库中为每种不同类型的值实际存储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); 

    }) 
});

作为一个快速警告我写了一篇关于在堆栈溢出编辑器窗口飞上述代码，以便有可能是一对夫妇的语法错误或轻微错误的地方，但在基本的想法应该工作。希望能帮助到你。 - 亚当

来源

2012-02-17 09:38:39 acarasso

谢谢，这很有帮助。我假设我们还需要在提交时隐藏隐藏输入的值，否则我们会在控件中获取值，即使它们是隐藏的。 – Andy 2012-02-17 16:18:37

其实我不会删除我保存的所有三个值，并保存变量选择器的值。然后，如果用户稍后切换回来，他们的旧值仍然存在。 – acarasso 2012-02-17 21:08:04

我已更新我的答案以包含一些其他信息。这两个答案到目前为止都很有帮助，但都不是那样，这是我的错，因为没有包含足够的细节。 – Andy 2012-02-19 14:42:29

如果你想充分利用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值（单独或母模内el），并根据选定的ValueType保存到数据库。请注意，如果您需要跳过对隐藏字段的验证（例如：隐藏），则需要jquery.validate版本1.9。

来源

2012-02-20 23:02:33 Artem

基于下拉选择的不同类型的输入控件？

回答

相关问题