页面展示样式为:
在下面的是第一个下拉框的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('请求失败');
}
});
});