js之select三级联动
效果图如下:
代码逻辑梳理:
层层递进，比如选择了课程后，将对应的课程id保存，然后点击选择章时自动触发对应的时间，根据这个课程ID获取其下面的章信息。
其它的如节等，同理。
代码说明:
如下代码不规范，可以参考功能实现，切不可照搬照抄(当然了，可以作为一个反面代码案例以告诫后来学习者，代码严谨和规范的重要性)。
比如与像一些通用的js和css等可以放在CDN上。
比如这样的标签，如果像源代码中掺杂大量的js代码时，强烈建议将其抽出为一个外部js文件，主要方便管理和维护及其未来扩展。
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>创建课时</title>
<link rel="stylesheet" href="../css/app.min.css"/>
<link rel="stylesheet" href="../layui/css/layui.css" media="all"> </head>
<body> <div class="rel alert-reg alert-reg2">
<div style="margin-left:90px;">
<table class="alert-tb tdh70" width="100%" cellpadding="" cellspacing="" border="">
<tr>
<td><em class="ico2 ico2-phone"></em></td>
<td><label for="regPhone_">选择课程：</label></td>
<td>
<span class="red">*</span>
<select id="course_list" name="course_list" class="vi fctr_label_2" style="height:20px;">
<option value="" id="course_val">请选择课程</option>
</select>
</td>
<td></td>
</tr> <tr>
<td><em class="ico2 ico2-phone"></em></td>
<td><label for="regPhone_">选择章：</label></td>
<td>
<span class="red">*</span>
<select onmouseover="chapterList()" id="chapter_list" class="vi fctr_label_2" style="height:20px;">
<option value="" id="chapter_val">请选择章</option>
</select>
</td>
<td></td>
</tr> <tr>
<td><em class="ico2 ico2-phone"></em></td>
<td><label for="regPhone_">选择节：</label></td>
<td>
<span class="red">*</span>
<select onmouseover="quarterList()" id="quarter_list" class="vi fctr_label_2" style="height:20px;">
<option value="" id="quarter_val">请选择节</option>
</select>
</td>
<td></td>
</tr> <tr>
<td><em class="ico2 ico2-phone"></em></td>
<td><label for="regPhone_">课时名称：</label></td>
<td>
<span class="red">*</span>
<input class="vi fctr_label_2" type="text" id="quarter_name" placeholder="请输入课时名称" maxlength=""/>
</td>
<td></td>
</tr> </table>
<br>
<br>
<div align="center" >
<button type="button" id="create_quarter" style="background-color: #7ED321;width: 150px;height: 36px;color: #FFFFFF">创建</button>
</div> <br /> </div>
</div> <script src="../js/jquery-1.11.3.min.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/layer/layer-v3.1.1/layer/mobile/layer.js" type="text/javascript"></script>
<script src="../js/common.js" charset="utf-8"></script>
<script type="text/javascript"> $(function () { courseListInfo(); $("#create_quarter").click(function(){ var courseId = $("#course_list").val(); var chapterId = $('#quarter_list option:selected') .val(); var quarterName = $("#quarter_name").val(); //alert("userCode = " + userCode) if(courseId==null || courseId==""){ layer.open({
content: '课程不能为空，请选择课程' ,
skin: 'msg',
time: //3秒后自动关闭
}); return false;
}else if(chapterId==null || chapterId==""){ layer.open({
content: '章节不能为空，请选择章节' ,
skin: 'msg',
time: //3秒后自动关闭
}); return false;
}else if(quarterName==null || quarterName==""){ layer.open({
content: '课时名称不能为空' ,
skin: 'msg',
time: //3秒后自动关闭
}); return false;
} else if(quarterName.length > ){ layer.open({
content: '课时名称太长' ,
skin: 'msg',
time: //3秒后自动关闭
}); return false;
}else{ $.ajax({
async:false,
url:RouterAPI.url.api.course_add_chapter,
type:"POST",
data : {"parentId":chapterId, "title":quarterName,"type":"lesson"},
dataType : 'json',
success:function(data){ if(data.code==""){
layui.use('layer', function(){
var layer = layui.layer; layer.alert("创建成功，返回课程管理页面",{icon:});
}); setTimeout(() => { parent.location.reload(); }, ); return true;
}else{
layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.msg,{icon:});
});
return false;
} },error:function(XMLHttpRequest, textStatus, errorThrown){
alert("失败");
// 状态码
alert(XMLHttpRequest.status);
// 状态
alert(XMLHttpRequest.readyState);
// 错误信息
alert(textStatus);
return false;
} });
} }); }); //课程选择发生变化
function courseListInfo(){ var creator = getMyCookie("userId"); $.ajax({
async:false,
url:RouterAPI.url.api.course_list,
type:"GET",
data : {"creator":creator},
dataType : 'json',
success:function(data){ if(data.code==""){ if (data.data.length > ) {
for (var i = ; i < data.data.length; i++) {
var item = data.data[i];
console.log(data.data[i].id);
$("#course_list").append('<option value="' + data.data[i].id + '">' + data.data[i].title + '</option>'); }
} return true;
}else{ layui.use('layer', function(){
var layer = layui.layer; layer.alert(data.msg,{icon:});
});
} },error:function(XMLHttpRequest, textStatus, errorThrown){
alert("失败");
// 状态码
alert(XMLHttpRequest.status);
// 状态
alert(XMLHttpRequest.readyState);
// 错误信息
alert(textStatus);
return false;
} }); } //章选择发生变化
function chapterList(){ var parentId = $('#course_list option:selected') .val(); var type="chapter"; $.ajax({
url : RouterAPI.url.api.course_chapter_list,
type : "GET",
data : {
parentId : parentId,
type : type
},
success:function(result) { $("#chapter_list option[value != '']").remove(); for (var i = ; i < result.data.length; i++) { $("#chapter_list").append("<option id='chapter_val' value='" + result.data[i].id + " '>" + result.data[i].title + "</option>");
} }
}); } //节选择变化
function quarterList(){ var parentId = $('#chapter_list option:selected') .val(); var type="unit"; $.ajax({
url : RouterAPI.url.api.course_chapter_list,
type : "GET",
data : {
parentId : parentId,
type : type
},
success:function(result) { $("#quarter_list option[value != '']").remove(); for (var i = ; i < result.data.length; i++) { $("#quarter_list").append("<option id='chapter_val' value='" + result.data[i].id + " '>" + result.data[i].title + "</option>");
} }
});
} function getQueryString(name) {
var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
if (result == null || result.length < ) {
return "";
}
return result[];
} </script> </body>
</html>
js之select三级联动的更多相关文章
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- jQuery实现select三级联动
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- 【原生js】原生js的省市区三级联动
html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- js实现省市区三级联动
电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- js原生实现三级联动下拉菜单
js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- Jquery select 三级联动 (需要JSON数据)
Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...
随机推荐
- MySQL之命令行简单操作MySQL(二)
一:命令行连接数据库 打开终端,运行命令mysql -uroot -p (p后面加密码,可以直接加,也可以回车在下一行输入,为了不暴露密码,回车在下行输入 退出:exit或quit 查看版本信息: s ...
- 【MySQL】数据库事务深入分析
一.前言 只有InnoDB引擎支持事务,下边的内容均以InnoDB引擎为默认条件 二.常见的并发问题 1.脏读 一个事务读取了另一个事务未提交的数据 2.不可重复读 一个事务对同一数据的读取结果前后不 ...
- git 从远程克隆代码并实现分支开发，合并分支，上传本地代码到远程
首先确认你已经安装了git 1.克隆远程代码到本地的操作 git clone 地址 打开git操作命令行 鼠标右键点击 复制需要克隆的项目的地址类似下面的ssh 输入命令进行 ...
- 为什么会有jQuery、Dojo、Ext、Prototype、YUI、Zepto这么多JS包？
目前流行的JS框架很多Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx 等.当然还有很多我都不熟悉的 ...
- OpenFire后台插件上传获取webshell及免密码登录linux服务器
1.目标获取 (1)fofa.so网站使用搜索body="Openfire, 版本: " && country=JP,可以获取日本存在的Openfire服务器.如图 ...
- VMware虚拟机文件夹中各文件作用详解
虚拟机的文件管理由VMware Workstation来执行 一个虚拟机一般以一系列文件的形式储存在宿主机中,这些文件一般在由workstation为虚拟机所创建的那个目录中 这里列出了这些关键文件及 ...
- 【python】多任务（2. 进程）
进程间通信 Queue import multiprocessing def download_from_web(q): # 模拟从网上下载数据 data = [11, 22, 33, 44] for ...
- Linux相关目录
Linux 启动流程 Linux--基本目录 Linux--selinux Linux--网卡配置 Linux--系统运行级别 Linux--重要文件
- pyppeteer进阶技巧
记录一下在使用pyppeteer过程中慢慢发现的一些稍微高级一点的用法. 一.拦截器简单用法 拦截器作用于单个Page,即浏览器中的一个标签页.每初始化一个Page都要添加一下拦截器.拦截器实际上是 ...
- JavaWeb项目前后端分离
前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦, 并且前后端分离会为以后的大型分布式架构.弹性计算架构.微 ...