使用jQuery给出代码: 有学生,学号,电话,性别等填入文本框,籍贯至少设置三个省或直辖市,每一个省或直辖市至少设置三个区县,选择某个省或直辖市之后,显示对应下辖的区县,比如重庆市只显示重庆下辖的区县,不得显示其他省的区县;课程有几种可选按钮,用户填入选课全部信息后(选修课至少选2门,选择课程如果没有达到2门,提交按钮不能使用),有重置按钮进行对填入数据清空。点击“提交”按钮,在表格下方插入新的一行。不能重复插入相同学号的记录
时间: 2023-12-03 12:02:29 浏览: 65
以下是一个简单的示例代码,实现了您的要求:
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();
});
});
```
以上代码仅为示例,可能需要根据具体情况进行调整。
阅读全文