jquery - 如何使用快速把手、物化、jQuery 和 ajax 基于第一个选项动态填充第二个选择列表？

Question

我知道这个话题有很多话题，但我似乎找不到与我的案例相似的话题。很多事情都与静态数据有关。

所以我想做的是，让用户在第一个选择列表中选择一个选项，然后根据该值，它将填充与该选择相关的任何内容。

我正在尝试为练习数组中的每个元素附加一个带有值和文本的“选项”标签，但我的第二个下拉列表根本没有显示选项。

我正在为我的路线使用 express，对于这个特定的路线，我想使用 ajax 来填充第二个下拉列表。我已经尝试了几个小时的很多事情，但我似乎无法解决。我是节点和 jQuery 的新手。

这是我的 index.hbs 文件：

<div class="row">
            <div class="input-field">
                <select id="program" name="program">
                    <option value="" disabled selected>select..</option>
                    {{#each programs}}
                    <option value="{{_id}}">{{this.name}}</option>
                    {{/each}}
                </select>
                <label>Programs</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field">
                <select id="dayOfWeek" name="dayOfWeek">
                    <option value="" disabled selected>select..</option>

                </select>
                <label>Day Of Week</label>
            </div>
        </div>

我的脚本中的代码：

$(document).ready(function () {
        //materialize initialization
        $('.sidenav').sidenav();
        $('select').formSelect();
        $('#program').on('change', function () {
            const programId = ($('#program').val());

            $.ajax({
                type: 'GET',
                url: `/exercises/${programId}`,
                dataType: 'json'
            }).done((program) => {
                console.log(program.exercises)
                const exercises = program.exercises;
                for (e in exercises) {
                    $('#dayOfWeek').append('<option>').val(exercises[e]._id).text(exercises[e].name)
                }
            });
        });
    });

任何帮助深表感谢。

标签： jqueryajaxexpressmaterializeexpress-handlebars