使用jQuery完成如下操作: 1、籍贯至少设置三个省或直辖市,每一个省或直辖市至少设置三个区县,选择某个省或直辖市之后,显示对应下辖的区县,比如重庆市只显示重庆下辖的区县,不得显示其他省的区县(5分) 2、用户输入选课全部信息后(选修课至少选2门,选择课程如果没有达到2门,提交按钮不能使用),点击“选课”按钮,象示例行那样在表格下方插入新的一行。不能重复插入相同学号的记录。(20分)
时间: 2024-03-03 16:51:20 浏览: 47
很抱歉,作为一个AI语言模型,我无法执行代码操作,但是我可以提供如下的思路和参考代码:
1. HTML结构
```
<label>籍贯:</label>
<select id="province">
<option value="">请选择省或直辖市</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="重庆市">重庆市</option>
</select>
<select id="county">
<option value="">请选择区县</option>
</select>
```
2. JavaScript代码
```
//定义省份和对应区县的对象
var counties = {
"北京市": ["东城区", "西城区", "朝阳区"],
"上海市": ["黄浦区", "徐汇区", "长宁区"],
"重庆市": ["渝中区", "江北区", "沙坪坝区"]
};
//省份下拉框改变事件
$("#province").change(function(){
//清空区县下拉框
$("#county").empty();
//获取选中的省份
var province = $(this).val();
//如果省份不为空,则显示对应的区县
if(province != ""){
//遍历对应省份的区县,并添加到区县下拉框中
for(var i=0; i<counties[province].length; i++){
$("#county").append("<option value='"+counties[province][i]+"'>"+counties[province][i]+"</option>");
}
}
});
```
3. HTML结构
```
<label>学号:</label>
<input type="text" id="studentId"><br>
<label>姓名:</label>
<input type="text" id="name"><br>
<label>选修课程1:</label>
<input type="text" id="course1"><br>
<label>选修课程2:</label>
<input type="text" id="course2"><br>
<button id="submit">选课</button><br>
<table border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>选修课程1</th>
<th>选修课程2</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
```
4. JavaScript代码
```
//定义已选学生的数组
var students = [];
//选课按钮点击事件
$("#submit").click(function(){
//获取输入的学生信息
var studentId = $("#studentId").val();
var name = $("#name").val();
var course1 = $("#course1").val();
var course2 = $("#course2").val();
//如果学生信息不为空,并且选修课程数量达到2门,则插入新的一行
if(studentId != "" && name != "" && course1 != "" && course2 != ""){
//判断学号是否已存在
var isExist = false;
for(var i=0; i<students.length; i++){
if(students[i].studentId == studentId){
isExist = true;
break;
}
}
//如果学号不存在,则插入新的一行
if(!isExist){
students.push({
"studentId": studentId,
"name": name,
"course1": course1,
"course2": course2
});
$("#tableBody").append("<tr><td>"+studentId+"</td><td>"+name+"</td><td>"+course1+"</td><td>"+course2+"</td></tr>");
}else{
alert("学号已存在!");
}
}else{
alert("请填写完整的学生信息和选修课程!");
}
});
```
阅读全文