使用jQuery给出代码: 有学生,学号,电话,性别等填入文本框,籍贯至少设置三个省或直辖市,每一个省或直辖市至少设置三个区县,选择某个省或直辖市之后,显示对应下辖的区县,比如重庆市只显示重庆下辖的区县,不得显示其他省的区县;课程有几种可选按钮,用户填入选课全部信息后(选修课至少选2门,选择课程如果没有达到2门,提交按钮不能使用),有重置按钮进行对填入数据清空。点击“提交”按钮,在表格下方插入新的一行。不能重复插入相同学号的记录

时间: 2023-12-03 14:02:29 浏览: 25
以下是一个简单的示例代码,实现了您的要求: HTML 代码: ```html <h2>学生信息</h2> <form> <div> <label>学生姓名:</label> <input type="text" name="name"> </div> <div> <label>学号:</label> <input type="text" name="studentId"> </div> <div> <label>电话:</label> <input type="text" name="phone"> </div> <div> <label>性别:</label> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 </div> <div> <label>籍贯:</label> <select name="province" id="province"> <option value="">请选择省份</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </select> <select name="city" id="city"> <option value="">请选择城市</option> </select> </div> <div> <label>选修课程:</label> <input type="checkbox" name="course" value="math">数学 <input type="checkbox" name="course" value="english">英语 <input type="checkbox" name="course" value="history">历史 <input type="checkbox" name="course" value="physics">物理 </div> <div> <button type="button" id="submit">提交</button> <button type="button" id="reset">重置</button> </div> </form> <h2>学生列表</h2> <table id="studentTable"> <thead> <tr> <th>学生姓名</th> <th>学号</th> <th>电话</th> <th>性别</th> <th>籍贯</th> <th>选修课程</th> </tr> </thead> <tbody> </tbody> </table> ``` jQuery 代码: ```javascript $(function() { // 初始化省份和城市 var provinceList = { "北京": ["东城区", "西城区", "海淀区"], "上海": ["黄浦区", "徐汇区", "长宁区"], "重庆": ["渝中区", "江北区", "南岸区"] }; var $province = $('#province'); var $city = $('#city'); $province.on('change', function() { var province = $(this).val(); var cityList = provinceList[province] || []; var html = ''; for (var i = 0; i < cityList.length; i++) { html += '<option value="' + cityList[i] + '">' + cityList[i] + '</option>'; } $city.html(html); }); // 点击提交按钮时,将表单数据添加到表格中 $('#submit').on('click', function() { var name = $('input[name="name"]').val(); var studentId = $('input[name="studentId"]').val(); var phone = $('input[name="phone"]').val(); var gender = $('input[name="gender"]:checked').val(); var province = $province.val(); var city = $city.val(); var courses = $('input[name="course"]:checked'); var courseList = []; courses.each(function() { courseList.push($(this).val()); }); // 验证表单数据 if (!name || !studentId || !phone || !gender || !province || !city || courseList.length < 2) { alert("请填写完整的学生信息和至少两门选修课程"); return; } // 验证学号是否重复 var $table = $('#studentTable'); var $rows = $table.find('tbody tr'); var isDuplicate = false; $rows.each(function() { var id = $(this).find('td:eq(1)').text(); if (id === studentId) { isDuplicate = true; return false; } }); if (isDuplicate) { alert("该学号已经存在,请重新输入"); return; } // 添加到表格中 var newRow = '<tr><td>' + name + '</td><td>' + studentId + '</td><td>' + phone + '</td><td>' + gender + '</td><td>' + province + city + '</td><td>' + courseList.join(', ') + '</td></tr>'; $table.find('tbody').append(newRow); // 清空表单数据 $('input[type="text"]').val(''); $('input[type="radio"], input[type="checkbox"]').prop('checked', false); $province.val(''); $city.empty(); }); // 点击重置按钮时,清空表单数据 $('#reset').on('click', function() { $('input[type="text"]').val(''); $('input[type="radio"], input[type="checkbox"]').prop('checked', false); $province.val(''); $city.empty(); }); }); ``` 以上代码仅为示例,可能需要根据具体情况进行调整。

相关推荐

最新推荐

recommend-type

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

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

jQuery简单实现点击文本框复制内容到剪贴板上的方法

分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData(...
recommend-type

Jquery代码实现图片轮播效果(一)

事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播。...
recommend-type

jQuery 获取和设置select下拉框的值实现代码

获取Select : 获取select 选中的 text : $(“#ddlRegType”).find(“option...设置select 选中的索引: $(“#ddlRegType “).get(0).selectedIndex=index;//index为索引值 设置select 选中的value:  $(“#ddlRegType
recommend-type

jquery实现input输入框实时输入触发事件代码

代码如下: &lt;input id=”productName” name=”productName” class=”wid10″ type=”text” value=”” /&gt; 代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {...
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

机器学习怎么将excel转为csv文件

机器学习是一种利用计算机算法和统计数据的方法来训练计算机来进行自动学习的科学,无法直接将excel文件转为csv文件。但是可以使用Python编程语言来读取Excel文件内容并将其保存为CSV文件。您可以使用Pandas库来读取Excel文件,并使用to_csv()函数将其保存为CSV格式。以下是代码示例: ```python import pandas as pd # 读取 Excel 文件 excel_data = pd.read_excel('example.xlsx') # 将数据保存为 CSV 文件 excel_data.to_csv('example.csv', index=
recommend-type

JSBSim Reference Manual

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