Razor页面编辑页中MissionDay下拉框无法自动选中数据库存储值的问题求助

我完全懂你的困扰——页面加载时Razor已经帮你把数据库里的MissionDay值选中了，但紧接着执行的missionTime()函数会重新生成下拉选项，直接覆盖了原本的选中状态。咱们只需要在重新生成选项后，把之前保存的数据库值再选回去就行，具体修改方案如下：

核心思路：保存原有选中值，生成选项后恢复 #

在missionTime()函数开头先把当前MissionDay的选中值存起来，等重新生成完下拉选项后，再把这个值设置回去。如果保存的值不在新的选项列表里（比如用户原来选的是周日，但现在MissionTime改成了每天），就默认选中第一个选项，避免出现无选中状态的情况。

修改后的完整JavaScript代码 #

<script>
$(document).ready(function () {
  missionTime ();
  $("#MissionTime").change(function () {
    missionTime ();
  });
  $("#MissionDay").change(function () {
    var d = new Date ();
    var val = $(this).val ();
    if (val == "Sunday") {
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);
    } else if (val == "Monday") {
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 1)% 7);
    } else if (val == "Tuesday") {
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 2)% 7);
    } else if (val == "Wednesday") {
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 3)% 7);
    } else if (val == "Thursday") {
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 4)% 7);
    } else if (val == "startMonth") {
      d.setMonth (d.getMonth () + 1, 1);
    } else if (val == "middleMonth") {
      var dt = d.getDate ();
      d.setDate (15);
      if (dt>= 15) {
        d.setMonth (d.getMonth () + 1);
      }
      d.setHours (23, 59, 59, 0);
    } else if (val == "endMonth") {
      d.setMonth (d.getMonth () + 1);
      d.setDate (0);
    } else if (val == "firstYear") {
      d = new Date (new Date ().getFullYear () +1, 0, 1);
    } else if (val == "lastYear") {
      d = new Date (new Date ().getFullYear (), 11, 31);
    }
    var dd = String (d.getDate ()).padStart (2, '0');
    var mm = String (d.getMonth () + 1).padStart (2, '0');
    var yyyy = d.getFullYear ();
    d = yyyy + '-' + mm + '-' + dd;
    document.getElementById ("firstDate").value = d;
  });
  function missionTime () {
    // 先保存当前MissionDay的选中值
    var savedDayValue = $("#MissionDay").val();
    
    var val = $("#MissionTime").val();
    if (val == "1") {
      $("#MissionDay").html("<option value='0'> without </option>");
      today ();
      // 恢复选中值，不存在则选默认的0
      $("#MissionDay").val(savedDayValue || "0");
    } else if (val == "7") {
      $("#MissionDay").html("<option value='Sunday'> Sunday </option> <option value='Monday'> Monday </option> <option value='Tuesday'> Tuesday </option> <option value='Wednesday'> Wednesday </option> <option value='Thursday'> Thursday </option> ");
      var d = new Date ();
      d.setDate (d.getDate () + ((7 - d.getDay ())% 7 + 0)% 7);
      var dd = String (d.getDate ()).padStart (2, '0');
      var mm = String (d.getMonth () + 1).padStart (2, '0');
      var yyyy = d.getFullYear ();
      d = yyyy + '-' + mm + '-' + dd;
      document.getElementById ("firstDate").value = d;
      // 检查保存的值是否在新选项里，存在则选中，否则默认选Sunday
      if ($("#MissionDay option[value='" + savedDayValue + "']").length) {
        $("#MissionDay").val(savedDayValue);
      } else {
        $("#MissionDay").val("Sunday");
      }
    } else if (val == "30") {
      // 修复原代码的语法错误，补全月份选项
      $("#MissionDay").html("<option value='startMonth'> start of month </option> <option value='middleMonth'> middle of month </option> <option value='endMonth'> end of month </option>");
      var d = new Date ();
      d.setMonth (d.getMonth () + 1, 1);
      var dd = String (d.getDate ()).padStart (2, '0');
      var mm = String (d.getMonth () + 1).padStart (2, '0');
      var yyyy = d.getFullYear ();
      d = yyyy + '-' + mm + '-' + dd;
      document.getElementById ("firstDate").value = d;
      // 恢复选中值，不存在则默认选startMonth
      if ($("#MissionDay option[value='" + savedDayValue + "']").length) {
        $("#MissionDay").val(savedDayValue);
      } else {
        $("#MissionDay").val("startMonth");
      }
    } else if (val == "365") {
      $("#MissionDay").html("<option value='firstYear'> beginning of year </option> <option value='lastYear'> end of year </option>");
      // 恢复选中值，不存在则默认选firstYear
      if ($("#MissionDay option[value='" + savedDayValue + "']").length) {
        $("#MissionDay").val(savedDayValue);
      } else {
        $("#MissionDay").val("firstYear");
      }
    } else if (val == "0") {
      $("#MissionDay").html("<option value='0'> without </option>");
      today ();
      $("#MissionDay").val(savedDayValue || "0");
    }
  }
  function today () {
    var today = new Date ();
    var dd = String (today.getDate ()).padStart (2, '0');
    var mm = String (today.getMonth () + 1).padStart (2, '0');
    var yyyy = today.getFullYear ();
    today = yyyy + '-' + mm + '-' + dd;
    document.getElementById ("firstDate").value = today;
  }
});
</script>

额外修复说明 #

我注意到你原代码中val == "30"的分支存在语法错误（. / option>），已经在修改后的代码里补全了正确的月份选项，确保代码能正常运行。

这样修改后，编辑页面加载时，MissionDay就能正确显示数据库里存储的值，同时动态切换MissionTime的交互功能也不会受影响。

内容的提问来源于stack exchange，提问作者R H segal