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