写一个实现下面这三个li标签内的select标签内的数据三级联动的js代码:<li class="select">学 院:<select name="college"> <option value="电子信息工程学院">电子信息工程学院</option> <option value="计算机与软件工程学院">计算机与软件工程学院</option> <option value="机器制造学院">机器制造学院</option> </select> </li> <li class="select">系 别:<select name="major"> <option value="计算机科学与技术系">计算机科学与技术系</option> <option value="数据分析系">数据分析系</option> <option value="信息管理系">信息管理系</option> </select> </li> <li class="select">班 级:<select name="class"> <option value="大数据">大数据</option> <option value="软件工程">软件工程</option> <option value="自动化">自动化</option> </select> </li> 注意:当没有选择学院时点击其他下拉列表显示请先选择学院,选择学院后选择系别才能选择班级
时间: 2023-07-19 07:04:37 浏览: 99
可以使用以下代码实现三级联动:
```html
<li class="select">
学院:
<select name="college" id="college">
<option value="">请选择</option>
<option value="电子信息工程学院">电子信息工程学院</option>
<option value="计算机与软件工程学院">计算机与软件工程学院</option>
<option value="机器制造学院">机器制造学院</option>
</select>
</li>
<li class="select">
系别:
<select name="major" id="major" disabled>
<option value="">请先选择学院</option>
</select>
</li>
<li class="select">
班级:
<select name="class" id="class" disabled>
<option value="">请先选择系别</option>
</select>
</li>
<script>
var college = document.getElementById('college');
var major = document.getElementById('major');
var Class = document.getElementById('class');
college.addEventListener('change', function() {
major.disabled = false;
Class.disabled = true;
major.innerHTML = '<option value="">请选择</option>';
if (college.value === '电子信息工程学院') {
major.innerHTML += '<option value="计算机科学与技术系">计算机科学与技术系</option>';
major.innerHTML += '<option value="数据分析系">数据分析系</option>';
major.innerHTML += '<option value="信息管理系">信息管理系</option>';
} else if (college.value === '计算机与软件工程学院') {
major.innerHTML += '<option value="软件工程系">软件工程系</option>';
major.innerHTML += '<option value="计算机工程系">计算机工程系</option>';
major.innerHTML += '<option value="网络工程系">网络工程系</option>';
} else if (college.value === '机器制造学院') {
major.innerHTML += '<option value="机电工程系">机电工程系</option>';
major.innerHTML += '<option value="自动化系">自动化系</option>';
major.innerHTML += '<option value="信息工程系">信息工程系</option>';
}
});
major.addEventListener('change', function() {
Class.disabled = false;
Class.innerHTML = '<option value="">请选择</option>';
if (major.value === '计算机科学与技术系') {
Class.innerHTML += '<option value="大数据">大数据</option>';
Class.innerHTML += '<option value="人工智能">人工智能</option>';
Class.innerHTML += '<option value="物联网">物联网</option>';
} else if (major.value === '数据分析系') {
Class.innerHTML += '<option value="数据挖掘">数据挖掘</option>';
Class.innerHTML += '<option value="数据可视化">数据可视化</option>';
Class.innerHTML += '<option value="商业分析">商业分析</option>';
} else if (major.value === '信息管理系') {
Class.innerHTML += '<option value="信息管理">信息管理</option>';
Class.innerHTML += '<option value="知识管理">知识管理</option>';
Class.innerHTML += '<option value="图书情报学">图书情报学</option>';
} else if (major.value === '软件工程系') {
Class.innerHTML += '<option value="移动应用开发">移动应用开发</option>';
Class.innerHTML += '<option value="前端开发">前端开发</option>';
Class.innerHTML += '<option value="后端开发">后端开发</option>';
} else if (major.value === '计算机工程系') {
Class.innerHTML += '<option value="嵌入式系统">嵌入式系统</option>';
Class.innerHTML += '<option value="计算机组成原理">计算机组成原理</option>';
Class.innerHTML += '<option value="操作系统">操作系统</option>';
} else if (major.value === '网络工程系') {
Class.innerHTML += '<option value="网络安全">网络安全</option>';
Class.innerHTML += '<option value="网络通信">网络通信</option>';
Class.innerHTML += '<option value="网络优化">网络优化</option>';
} else if (major.value === '机电工程系') {
Class.innerHTML += '<option value="数控技术">数控技术</option>';
Class.innerHTML += '<option value="机器人技术">机器人技术</option>';
Class.innerHTML += '<option value="智能制造">智能制造</option>';
} else if (major.value === '自动化系') {
Class.innerHTML += '<option value="控制工程">控制工程</option>';
Class.innerHTML += '<option value="自动化设计">自动化设计</option>';
Class.innerHTML += '<option value="自动化测试">自动化测试</option>';
} else if (major.value === '信息工程系') {
Class.innerHTML += '<option value="信息安全">信息安全</option>';
Class.innerHTML += '<option value="信息技术">信息技术</option>';
Class.innerHTML += '<option value="信息管理">信息管理</option>';
}
});
</script>
```
以上代码中,通过监听学院(college)下拉列表的选择事件,根据所选学院动态生成系别(major)下拉列表的选项,并且将班级(Class)下拉列表禁用。当选择系别后,根据所选系别动态生成班级下拉列表的选项,并且启用班级下拉列表。如果没有选择学院,点击其他下拉列表会提示“请先选择学院”。
阅读全文