如何解决如何在充满 JavaScript 的选项中从数据库中进行选择
我是剃刀页面的新手
- 1 - “MissionTime”和另一个 - “MissionDay”。 MissionDay 中的选择根据 MissionTime 的选择而有所不同。 在 JavaScript 方面它工作得很好!在“创建”页面上,它运行得非常好。
同样在编辑页面上它在 JavaScript 部分运行良好。 问题是当数据库有信息()但没有根据数据库中的值进行选择。
<div class = "col-sm-4">
<label asp-for = "Mission.MissionTime" class = "control-label"> </label>
<select id = "MissionTime" asp-for = "Mission.MissionTime">
<option value = "0">
with no
</option>
<option value = "1">
Every day
</option>
<option value = "7">
once a week
</option>
<option value = "30">
once a month
</option>
<option value = "365">
Once a year
</option>
</select>
</div> <div class = "col-sm-4">
<label asp-for = "Mission.MissionDay" class = "control-label"> </label>
<select id = "MissionDay" asp-for = "Mission.MissionDay">
<option value = "0">
with no
</option>
</select>
</div>
代码 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") {
// if 15th of current month is over move to next month
// need to check whether to use> = or just> ie on 15th Jun
// if you want 15 Jun then use> else if you want 15 Jul use> =
var dt = d.getDate ();
d.setDate (15);
if (dt> = 15) {
d.setMonth (date.getMonth () + 1);
}
d.setHours (23,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,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'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
}
);
function missionTime () {
var val = $ ("# MissionTime"). val ();
if (val == "1") {
$ ("#MissionDay"). Html ("<option value = '0'> without </option>");
today ();
} 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'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
} else if (val == "30") {
. / option> ");
var d = new Date ();
d.setMonth (d.getMonth () + 1,1);
var dd = String (d.getDate ()). padStart (2,'0'); // January is 0!
var yyyy = d.getFullYear ();
d = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = d;
} else if (val == "365") {
$ ("#MissionDay"). Html ("<option value = 'firstYear'> beginning of year </option> <option value = 'lastYear'> end of year </option>");
} else if (val == "0") {
$ ("#MissionDay"). Html ("<option value = '0'> without </option>");
today ();
}
}
function today () {
var today = new Date ();
var dd = String (today.getDate ()). padStart (2,'0');
var mm = String (today.getMonth () + 1) .padStart (2,'0'); // January is 0!
var yyyy = today.getFullYear ();
today = yyyy + '-' + mm + '-' + dd;
document.getElementById ("firstDate"). value = today;
}
});
</script>
代码效果很好! 问题是我无法在“MissionDay”中获取数据
我猜这是因为页面首先从数据库中获取数据,然后才运行脚本。有人对如何解决这个问题有任何建议吗?
最好的问候
解决方法
问题是当数据库有信息()但没有根据数据库中的值进行选择时。
请注意,当 Select Tag Helper 呈现时,您在 JavaScript 客户端上生成的选项不可用。因此,它不会根据通过 Mission.MissionDay
传递的数据设置默认选择的选项。
为了实现根据存储的 MissionDay
设置默认选中选项的要求,您可以尝试将数据存储在隐藏字段中,然后在 JavaScript 代码中设置选中选项,如下所示。
使用 id="hf_missionDay"
<label asp-for="Mission.MissionDay" class="control-label"> </label>
<input type="hidden" id="hf_missionDay" value="Mission.MissionDay" />
<select id="MissionDay" asp-for="Mission.MissionDay">
<option value="0">
with no
</option>
</select>
根据隐藏字段中的数据存储设置所选选项
$(document).ready(function() {
missionTime();
SetSelectionOfMissionDay();
//...
//your code logic here
//...
SetSelectionOfMissionDay 函数
function SetSelectionOfMissionDay() {
var mday = $("#hf_missionDay").val();
$("select#MissionDay option[value='" + mday + "']").attr("selected",true);
//or
//$("select#MissionDay").val(mday);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。