當用戶爲DropDownList選擇一個值時強制提交，除非該值爲自定義

我期待在用戶爲DropDownList選擇一個值時強制提交，只要它不是「自定義」即可。如果是「自定義」，我不希望提交表單。相反，我想要顯示startingDate和endingDate。但是，除非選擇自定義，否則我不想顯示startingDate或endingDate。我認爲這必須用jQuery或JavaScript來完成。任何人都可以告訴我如何實現這一目標？當用戶爲DropDownList選擇一個值時強制提交，除非該值爲自定義

這裏是我在控制器通過起始日期代碼，結束日期和列表下拉到視圖：

List<SelectListItem> rangeList = new List<SelectListItem>(); 
rangeList.Add(new SelectListItem { Text = "Today", Value = "Today" }); 
rangeList.Add(new SelectListItem { Text = "Yesterday", Value = "Yesterday" }); 
rangeList.Add(new SelectListItem { Text = "Past 7 Days", Value = "Past 7 Days" }); 
rangeList.Add(new SelectListItem { Text = "Past 30 Days", Value = "Past 30 Days" }); 
rangeList.Add(new SelectListItem { Text = "Last Month", Value = "Last Month" }); 
rangeList.Add(new SelectListItem { Text = "Custom", Value = "Custom" }); 

ViewBag.rangeList = rangeList; 
ViewBag.startingDate = startingDate; 
ViewBag.endingDate = endingDate; 
ViewBag.specifiedRange = specifiedRange;

編輯

我修改了代碼顯示嘗試添加腳本。以下是我現在在視圖中的代碼。它沒有做任何事情。

<script type="text/javascript"> 
    $("#range").change(function() 
    { 
     if ($(this).val() == "Custom") 
     { 
      $("p.down").toggle(); 
     } 
     else 
     { 
      $("form").submit(); 
     } 
    }); 
</script> 

@using (Html.BeginForm()) 
{ 
    <p> 
     @Html.DropDownList("specifiedRange", new SelectList(
        ViewBag.rangeList as System.Collections.IEnumerable, 
        "Text", 
        "Value", 
        new { @Id = "range" })) 
    </p> 
    <p class = "down"> 
     Starting Date: @(Html.Telerik().DateTimePicker().Name("startingDate")) 
     Ending Date: @(Html.Telerik().DateTimePicker().Name("endingDate")) 
     <input type="submit" value="GO" /> 
    </p> 
}

來源

2012-04-13 Linger

屏幕閱讀器用戶自動提交表單就非常不友好。 – steveax 2012-04-13 20:22:01

是的，它需要與jquery.Something做過這樣的：

$(document).ready(function(){ 
    $("#idofyourdropdown").change(function(){ 
     if($(this).val() == "Custom") 
     { 
     $("p.down").toggle(); 
     } 
     else{ 
     $("form").submit(); 
    } 

    }); 
});

和類「下」來，你要顯示你的<p>。

來源

2012-04-13 20:05:28

我對jquery或javascript一無所知。我在哪裏把你的代碼？它直接在視圖中嗎？ – Linger 2012-04-13 20:27:52

你需要下載一個jQuery庫，在你的html中引用它，然後把這個腳本標籤放在裏面。一切都在這裏：jquery.com – 2012-04-13 20:30:41

但是，既然你在mvc3上，一切都應該已經在那裏了。您只需執行並將我在此腳本中提供的代碼放入。 – 2012-04-13 20:38:58

這是你在找什麼？

$('#specifiedRange').change(function() { 
    if($(this).val() !== 'Custom') $(this).closest('form').submit(); 
})

來源

2012-04-13 20:04:24 Prestaul

當用戶爲DropDownList選擇一個值時強制提交，除非該值爲自定義

回答

相關問題