使用jQuery完成如下操作: 1、 籍贯至少设置三个省或直辖市,每一个省或直辖市至少设置三个区县,选择某个省或直辖市之后,显示对应下辖的区县,比如重庆市只显示重庆下辖的区县,不得显示其他省的区县(5分) 2、 用户输入选课全部信息后(选修课至少选2门,选择课程如果没有达到2门,提交按钮不能使用),点击“选课”按钮,象示例行那样在表格下方插入新的一行。不能重复插入相同学号的记录。(20分) -->用js,jquery代码完成

时间: 2024-03-15 12:45:57 浏览: 25
以下是HTML代码: ```html <label for="province">籍贯:</label> <select id="province" name="province"> <option value="">请选择省份</option> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <option value="重庆市">重庆市</option> </select> <select id="city" name="city" disabled> <option value="">请选择城市</option> </select> <select id="district" name="district" disabled> <option value="">请选择区县</option> </select> <br> <br> <label for="sno">学号:</label> <input type="text" id="sno" name="sno"><br> <label for="sname">姓名:</label> <input type="text" id="sname" name="sname"><br> <label for="course1">选修课1:</label> <input type="text" id="course1" name="course1"><br> <label for="course2">选修课2:</label> <input type="text" id="course2" name="course2"><br> <label for="course3">选修课3:</label> <input type="text" id="course3" name="course3"><br> <button id="submit">选课</button><br> <br> <table id="table"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>选修课1</th> <th>选修课2</th> </tr> </thead> <tbody> </tbody> </table> ``` 以下是jQuery代码: ```javascript $(document).ready(function(){ var province = $("#province"); var city = $("#city"); var district = $("#district"); var sno = $("#sno"); var sname = $("#sname"); var course1 = $("#course1"); var course2 = $("#course2"); var course3 = $("#course3"); var submit = $("#submit"); var table = $("#table tbody"); var selectedSno = []; // 已选学号 // 籍贯下拉框选择省份时,根据省份显示对应的城市 province.change(function(){ var selectedProvince = $(this).val(); if(selectedProvince === ""){ city.html("<option value=\"\">请选择城市</option>"); district.html("<option value=\"\">请选择区县</option>"); city.prop("disabled", true); district.prop("disabled", true); }else{ // 根据选中的省份,获取对应的城市 var cities = getCities(selectedProvince); var options = "<option value=\"\">请选择城市</option>"; for(var i=0; i<cities.length; i++){ options += "<option value=\"" + cities[i] + "\">" + cities[i] + "</option>"; } city.html(options); district.html("<option value=\"\">请选择区县</option>"); city.prop("disabled", false); district.prop("disabled", true); } }); // 城市下拉框选择城市时,根据城市显示对应的区县 city.change(function(){ var selectedProvince = province.val(); var selectedCity = $(this).val(); if(selectedCity === ""){ district.html("<option value=\"\">请选择区县</option>"); district.prop("disabled", true); }else{ // 根据选中的省份和城市,获取对应的区县 var districts = getDistricts(selectedProvince, selectedCity); var options = "<option value=\"\">请选择区县</option>"; for(var i=0; i<districts.length; i++){ options += "<option value=\"" + districts[i] + "\">" + districts[i] + "</option>"; } district.html(options); district.prop("disabled", false); } }); // 点击选课按钮时,插入新的一行 submit.click(function(){ var curSno = sno.val(); var curSname = sname.val(); var curCourse1 = course1.val(); var curCourse2 = course2.val(); var curCourse3 = course3.val(); // 判断学号是否已经存在 if(selectedSno.indexOf(curSno) >= 0){ alert("该学号已经存在,请重新输入"); return; } // 判断选修课是否选够2门 if(curCourse1 === "" || curCourse2 === ""){ alert("选修课至少需要选2门,请重新输入"); return; } // 插入新行 var newRow = "<tr><td>" + curSno + "</td><td>" + curSname + "</td><td>" + curCourse1 + "</td><td>" + curCourse2 + "</td></tr>"; table.append(newRow); selectedSno.push(curSno); // 将新插入的学号加入已选学号数组中 }); }); // 获取省份对应的城市 function getCities(province){ var cities = []; switch(province){ case "北京市": cities = ["北京市"]; break; case "上海市": cities = ["上海市"]; break; case "重庆市": cities = ["重庆市"]; break; } return cities; } // 获取省份和城市对应的区县 function getDistricts(province, city){ var districts = []; switch(city){ case "北京市": districts = ["东城区", "西城区", "朝阳区"]; break; case "上海市": districts = ["黄浦区", "徐汇区", "长宁区"]; break; case "重庆市": districts = ["渝中区", "江北区", "南岸区"]; break; } return districts; } ```

相关推荐

最新推荐

recommend-type

jQuery使用attr()方法同时设置多个属性值用法实例

主要介绍了jQuery使用attr()方法同时设置多个属性值的用法,实例分析了jQuery中attr方法实现多个属性设置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
recommend-type

jQuery删除节点的三个方法即remove()detach()和empty()

jQuery提供了三种删除节点的方法,即remove(),detach()和empty()。 测试所用HTML代码: 代码如下: ”选择你最喜欢的水果?”&gt;你最喜欢的水果是?&lt;/p&gt; &lt;ul&gt; ”苹果”&gt;苹果&lt;/li&gt; ”橘子”&gt;橘子&lt;/li&gt; ”菠萝”&gt;菠萝...
recommend-type

jQuery Datatable 多个查询条件自定义提交事件(推荐)

主要介绍了jQuery Datatable 多个查询条件自定义提交事件的相关资料,需要的朋友可以参考下
recommend-type

JavaScript jQuery 中定义数组与操作及jquery数组操作

首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象 Javascript不支持多维数组,但是因为数组里面可以...
recommend-type

为jquery的ajax请求添加超时timeout时间的操作方法

下面给大家介绍为jquery的ajax请求添加超时timeout时间的实例 有时侯要用ajax来轮询某个服务是否可用,但是各个浏览器ajax的超时时间有可能不一样,所以希望ajax能只尝试几秒钟,然后隔几秒再次发送一次ajax检查一次...
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

可见光定位LED及其供电硬件具体型号,广角镜头和探测器,实验设计具体流程步骤,

1. 可见光定位LED型号:一般可使用5mm或3mm的普通白色LED,也可以选择专门用于定位的LED,例如OSRAM公司的SFH 4715AS或Vishay公司的VLMU3500-385-120。 2. 供电硬件型号:可以使用常见的直流电源供电,也可以选择专门的LED驱动器,例如Meanwell公司的ELG-75-C或ELG-150-C系列。 3. 广角镜头和探测器型号:一般可采用广角透镜和CMOS摄像头或光电二极管探测器,例如Omron公司的B5W-LA或Murata公司的IRS-B210ST01。 4. 实验设计流程步骤: 1)确定实验目的和研究对象,例如车辆或机器人的定位和导航。
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。