如何在填充有 JavaScript 的选项中从数据库 select

Question

我是 razor 页面的新手

我有一个编辑页面 - 它有 2 个 selection 标签

1 - “MissionTime”，另一个 - “MissionDay”。 MissionDay 中的选择因 MissionTime 的选择而异。就 JavaScript 而言，效果很好！在“创建”页面上效果非常好。

同样在编辑页面上 它在 JavaScript 部分工作得很好。 问题是当数据库有信息() 但根据数据库中的值没有select。

        <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, 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'); // 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');
                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 == "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”中的数据

我想这是因为首先页面从数据库中获取数据，然后才执行运行脚本。有人对如何解决这个问题有任何建议吗？

此致

Answer 1

The problem is when the database has information () but it does not select according to the value in the database.

请注意，呈现 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);
}

如何在填充有 JavaScript 的选项中从数据库 select

How to select from the database within a option that is filled with JavaScript

asp.net-core

razor-pages