通过我的尝试挑战

Question

在cshtml视图中，我有一个包含2个可能选项的下拉列表。如果选择返回“True”，则具有2个日期选择器的容器变为可见，因此用户可以选择日期范围。每当我切换下拉选项时，都会为两个日期选择器分配相应的值。

$("#ExpirationChoice").change(function () {
    var val = $(this).val();  //picks up either True or False

    if (val) {
        if (val === "True") {
            $("#expirationDates").show();    //show container with datepickers
            $("#BeginDate").val(getFormattedDate(today()));
            $("#EndDate").val(getFormattedDate(today().addMonths(6)));
        }
        else {
            $("#expirationDates").hide();
            $("#BeginDate").val("");
            $("#EndDate").val(getFormattedDate(today()));
        }
    }
    else {
        alert("Please select an option of past or future expiration report.");
    }
});

假设我从下拉列表中选择了True，在12/23/16和01/23/17之间选择了1个月的范围，单击按钮生成表格。

然后，我将下拉选项切换为False，这导致隐藏容器并在datepickers中将日期值重新分配给empty和today（隐藏，因此，用户无法控制）。 / p>

现在，当我再次切换回True时，我的选择消失了，它再次将其分配到6个月的范围内（我明白为什么会这样做，我会在稍后解释我的尝试）。

我的问题是：每当我切换时，如何保持我的最新选项与True选项

通过我的尝试挑战

我完全理解为什么它的行为方式如下。我的想法是将来自True选项的选择日期选择器存储到变量中。然而，这是一个我突然遇到的挑战：

if (val === "True") {
   $("#expirationDates").show();

   $("#BeginDate").val(getFormattedDate(today()));
   $("#EndDate").val(getFormattedDate(today().addMonths(6)));

   var start = $("#BeginDate").val();
   var end = $("#EndDate").val();
}

我最初需要将日期指定为6个月的日期范围。到目前为止变量正确存储日期。但是，每当我切换时，日期值将被重新分配回6个月的范围，并且它将变为无限循环。

相当多，我会对这种问题的更好方法表示赞赏。

Answer 1

使用标志var

var flag = false; //global variable
var start;//global variable
var end;//global variable
if (val === "True") {
   $("#expirationDates").show();

   if(flag == false){
       $("#BeginDate").val(getFormattedDate(today()));
       $("#EndDate").val(getFormattedDate(today().addMonths(6)));
   }
   else {
       $("#BeginDate").val(start);
       $("#EndDate").val(end);
   }
   start = $("#BeginDate").val();
   end = $("#EndDate").val();
   flag = true;
}

Answer 2

我的主要挑战是从datepickers获取更新值。在做了一些额外的研究后，我发现this post作为解决我的问题的提示。因此，我没有从.change（）获取最新值，而是在.click（）

上存储了必要的值

$("#btnExpiringUnitsTable").click(function () {
    var e = document.getElementById("ExpirationChoice");
    var selectedOption = e.options[e.selectedIndex].value;

    //code
    if (selectedOption === "True") {    //store latest datepicker values in variables from "True" selection
        start = $("#BeginDate").val();
        end = $("#EndDate").val();
    }
    //code
});

至于我的初始.change（函数），它将其缩小为以下内容：

$("#ExpirationChoice").change(function () {
    var val = $(this).val();


    if (val) {
        if (val === "True") {
            $("#expirationDates").show();
            $("#BeginDate").val(start);
            $("#EndDate").val(end);
        }
        else {
            $("#expirationDates").hide();
            $("#BeginDate").val("");
            $("#EndDate").val(getFormattedDate(today()));
        }
    }
    else {
        alert("Please select an option of past or future expiration report.");
    }
});

从我看到的，我将无法从.change（）中获取更新的值，我将不得不使用.click（）。

如何在javascript中保持cshtml视图对象的值？

通过我的尝试挑战

2 个答案: