Layui中在通过请求获取数据显示到select下拉框并通过一个下拉框的数据改变另一个下拉框的值

页面展示样式为：

在下面的是第一个下拉框的js代码为：

// 获取所有课程

    layui.use(['form'], function () {

    var $ = layui.jquery,

        form = layui.form;

    // 发起GET请求获取数据

    $.ajax({

        url: 'https://localhost:44301/api/Course/GetAllCourse',

        type: 'GET',

        success: function (data) {

            // 获取成功后将数据填充到<select>标签中

            var selectElem = $('#questionTypeSelect1');

            // 清空原有选项

            selectElem.empty();

            // 添加新的选项（data.data是each的对象，this.cName是要展示的数据的cName属性值 ）

            $.each(data.data, function (index,item) {

                selectElem.append('<option value="' + this.cName + '">' + this.cName + '</option>');

            });

            // 重新渲染select

            form.render('select');

        },

        error: function (xhr, status, error) {

            console.error('发生错误:', error);

        }

    }

}）；

这是第二个下拉框的js代码：（缺陷是只有点击第一个下拉框的值才能显示出第二个下拉框的值，这样会导致第一个值不能直接获取）

 //根据课程下拉列表选项对知识点同步更新

    layui.use(['jquery', 'form'], function() {

    var $ = layui.jquery;

    var form = layui.form;

    // 初始化学科下拉列表

    var select1 = $('#questionTypeSelect1');

    // 这里你需要自己填充学科下拉列表的选项，可以通过Ajax请求获取数据并填充

    // 示例中使用了一个静态的选项作为示例

    form.render(); // 渲染layui表单

    // 监听questionTypeSelect1下拉列表的change事件

    form.on('select(onClickSelected)', function(data) {

        var c = data.value; // 获取选中的学科

        //encodeURIComponent可以解决字符不可识别的问题

        var course= encodeURIComponent(c);

        // 发起GET请求

        $.ajax({

        type: 'GET',

        url: 'https://localhost:44301/api/KnowPoint/GetKpByCourse',

        data: { cname: course },

        dataType: 'json',

        success: function(options) {

            var select2 = $('#questionTypeSelect3');

            select2.empty(); // 清空原有选项

            // 添加新的选项

            $.each(options.data, function(index, option) {

            var optionElem = $('<option>').val(option.kPointName).text(option.kPointName);

            select2.append(optionElem);

            });

            form.render(); // 重新渲染layui表单

        },

        error: function() {

            console.log('请求失败');

        }

        });

    });

    });

可以通过直接赋值进行数据请求：

 //获取初始的知识点值

    layui.use(['form'], function () {

    var $ = layui.jquery,

        form = layui.form;

   

    var course="CSharp";

    // 发起GET请求获取数据

     // 发起GET请求

     $.ajax({

      type: 'GET',

      url: 'https://localhost:44301/api/KnowPoint/GetKpByCourse',

      data: { cname: course },

      dataType: 'json',

      success: function(options) {

        var select2 = $('#questionTypeSelect3');

        select2.empty(); // 清空原有选项

        // 添加新的选项

        $.each(options.data, function(index, option) {

          var optionElem = $('<option>').val(option.kPointName).text(option.kPointName);

          select2.append(optionElem);

        });

        form.render(); // 重新渲染layui表单

      },

      error: function() {

        console.log('请求失败');

      }

    });

});