基於下拉選擇的不同類型的輸入控件？

我正在構建一個編輯屏幕，用戶可以在其中編輯數據行。其中一個字段由下拉表示，另一個字段爲名爲「值」的輸入字段。現在，根據下拉列表中的值，我需要爲值輸入控件提供不同類型的輸入控件。有時它應該是一個文本框，其他日期時間控件（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

基於下拉選擇的不同類型的輸入控件？

回答

相關問題