如何实现在网页里面的下拉列表中的联动
就是#option 一班 /option
# Option 二班 /option
#tr /tr
如何选择一班，会在表格中显示一班的数据
选择二班会在表格中实现二班的数据
求帮助
这个主要是 监听 select 的onchange 事件 。改变时 切换 table 或者 table的数据 。
完美解决，代码如下：
<select id="class-select" onchange="handleChange(value)">
<option value="1">一班</option>
<option value="2">二班</option>
</select>
<table id="data-table-1" border>
<tr>
<th>班级</th>
<th>人数</th>
</tr>
<tr>
<td>一班</td>
<td>20</td>
</tr>
</table>
<table id="data-table-2" border style="display: none">
<tr>
<th>班级</th>
<th>人数</th>
</tr>
<tr>
<td>二班</td>
<td>30</td>
</tr>
</table>
<script>
function handleChange(value) {
if(value == 1) {
document.getElementById('data-table-1').style.display = ''
document.getElementById('data-table-2').style.display = 'none'
} else {
document.getElementById('data-table-2').style.display = ''
document.getElementById('data-table-1').style.display = 'none'
}
}
</script>
希望采纳！！！
https://zhidao.baidu.com/question/1840424708145367420.html
对班级的select进行change监听，根据获取option value来获取班级数据，并把数据动态赋值到表格中
// jq
$("select").on("change", function(e) {
let val = $(this).val();
$.ajax({
url: "获取班级数据url?班级id=" + val,
success: response => {
data = response.data
let html = "";
// 循环结果并拼接表格html
$.each(data. (item, index) => {
html += "<tr><td>" + item['name'] + "</td></tr>"
}
// 将表格结果动态写入表格中，也可以做不同表格的显示隐藏，具体可根据业务需求决定
$("table").html(html)
}
})
})
该回答引用ChatGPT
你可以使用 JavaScript 实现这个需求。
首先，选择框和表格的元素需要被设置 id，这样才能通过 JavaScript 代码对它们进行操作。
然后，使用 JavaScript 的 addEventListener() 方法为选择框绑定 change 事件，当选择框的选择改变时，这个事件会被触发。
在事件处理函数中，你需要获取当前选择框的值，然后根据它的值进行相应的操作，如显示对应的表格数据。
代码如下：
<select id="class-select">
<option value="1">一班</option>
<option value="2">二班</option>
</select>
<table id="data-table">
<tr>
<td>一班</td>
<td>1</td>
</tr>
<tr>
<td>一班</td>
<td>2</td>
</tr>
<tr>
<td>二班</td>
<td>3</td>
</tr>
<tr>
<td>二班</td>
<td>4</td>
</tr>
</table>
<script>
const classSelect = document.getElementById('class-select');
const dataTable = document.getElementById('data-table');
classSelect.addEventListener('change', function() {
const selectedClass = classSelect.value;
dataTable.querySelectorAll('tr').forEach(function(row) {
if (row.firstElementChild.textContent === selectedClass) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});
</script>
这是一个简单的示例，你可以根据自己的需求进行修改
哥，你这前端别学了吧
实现网页中下拉列表的联动，可以使用JavaScript创建一个事件监听器，监听第一个下拉列表的值变化，然后更新第二个下拉的选项 基于所选值的列表。
这是实现此功能的一般方法：
添加事件监听器：使用JavaScript 在第一个下拉列表中添加一个事件监听器，监听“change”事件。
获取选中值：当第一个下拉列表的值发生变化时，使用JavaScript获取选中值。
过滤选项：根据选择的值，使用JavaScript过滤第二个下拉列表的选项。
更新选项：删除第二个下拉列表中的现有选项，并使用 JavaScript 添加过滤后的选项。
下面是一个使用 jQuery 的示例代码片段：
$(document).ready(function() {
// add event listener to first dropdown
$("#firstDropdown").change(function() {
// get selected value
var selectedValue = $(this).val();
// filter options of second dropdown
var filteredOptions = getFilteredOptions(selectedValue);
// remove existing options and add filtered options
$("#secondDropdown").empty();
$.each(filteredOptions, function(key, value) {
$("#secondDropdown").append($("<option></option>").attr("value", key).text(value));
});
});
});
function getFilteredOptions(selectedValue) {
// return filtered options based on selected value
// ...
}
请注意，具体的实施将取决于网页的具体要求和限制。
js,jsp实现下拉列表的联动，参考代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/css/bootstrapValidator.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-6 column">
<!-- onsubmit="isPoneAvailable()" -->
<form name="form1" class="form-horizontal"
action="${pageContext.request.contextPath}/user/insert.do"
method="post" role="form" onsubmit="return fmsub()">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input width="80px;" type="text" class="form-control"
id="name" name="name" />
<font color="red" id="msgname">${msgname}</font>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password"
name="password" />
<font color="red" id="msgpassword">${msgpassword}</font>
</div>
</div>
<div class="form-group">
<label for="inputEmail2" class="col-sm-2 control-label">联系方式</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone"
name="phone" />
<font color="red" id="msgphone">${msgphone}</font>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">我的职位：</label>
<div class="col-sm-10">
<select class="form-control" style="width: 300px" id="type"
name="type" onChange="set_pt(this, this.form.pt);">
<option value="0">请选择...</option>
<option value="admin">admin</option>
<option value="员工">员工</option>
<option value="上海仓">上海仓</option>
<option value="北京仓">北京仓</option>
<option value="山东仓">山东仓</option>
<option value="浙江仓">浙江仓</option>
<option value="安徽仓">安徽仓</option>
<option value="福建仓">福建仓</option>
<option value="江西仓">江西仓</option>
<option value="广东仓">广东仓</option>
<option value="广西仓">广西仓</option>
<option value="海南仓">海南仓</option>
<option value="湖北仓">湖北仓</option>
<option value="天津仓">天津仓</option>
<option value="河北仓">河北仓</option>
<option value="山西仓">山西仓</option>
<option value="内蒙古仓">内蒙古仓</option>
<option value="青海仓">青海仓</option>
<option value="陕西仓">陕西仓</option>
<option value="甘肃仓">甘肃仓</option>
<option value="四川仓">四川仓</option>
<option value="云南仓">云南仓</option>
<option value="重庆仓">重庆仓</option>
<option value="吉林仓">吉林仓</option>
<option value="黑龙江仓">黑龙江仓</option>
</select>
<font color="red" id="msgtype">${msgtype}</font>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">所属上级：</label>
<div class="col-sm-10">
<select class="form-control" style="width: 300px" id="pt"
name="pt">
<option value="0">请选择...</option>
</select>
<font color="red" id="msgpt">${msgpt}</font>
</div>
</div>
<button type="submit" class="btn btn-default">添加</button>
</form>
</div>
<div class="col-md-6 column"></div>
</div>
</div>
</body>
<script>
//对input中数据进行判断
function fmsub(){
var name = $("#name").val();
console.log(name);
var phone = $("#phone").val();
var password = $("#password").val();
var type = $("#type").val();
var pt = $("#pt").val();
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (name == null || name == "") {
document.getElementById("msgname").innerHTML = "*姓名不能为空";
return false;
}
if (password == null || password == "") {
document.getElementById("msgpassword").innerHTML = "*密码不能为空";
return false;
}
if (phone == null || phone == "") {
document.getElementById("msgphone").innerHTML = "*手机号码不能为空";
return false;
}
if (!myreg.test($("#phone").val())) {
document.getElementById("msgphone").innerHTML = "*请填写正确的11位手机号";
return false;
}
if (type == 0) {
document.getElementById("msgtype").innerHTML = "*请输入当前职位";
return false;
}
if (type != "admin") {
if (pt== 0) {
document.getElementById("msgpt").innerHTML = "*请输入所属上级";
return false;
}
}
}
/*二级下拉列表*/
cities = new Object();
cities['admin']
cities['员工'] = new Array('北京仓', '山东仓', '浙江仓', '安徽仓', '云南仓', '江西仓', '广东仓', '广西仓', '海南仓',
'湖北仓', '天津仓', '河北仓', '山西仓', '内蒙古仓', '吉林仓', '青海仓', '陕西仓', '甘肃仓', '重庆仓', '四川仓', '黑龙江仓','上海仓');
cities['北京仓'] = new Array('admin');
cities['山东仓'] = new Array('admin');
cities['浙江仓'] = new Array('admin');
cities['安徽仓'] = new Array('admin');
cities['云南仓'] = new Array('admin');
cities['江西仓'] = new Array('admin');
cities['广东仓'] = new Array('admin');
cities['广西仓'] = new Array('admin');
cities['海南仓'] = new Array('admin');
cities['湖北仓'] = new Array('admin');
cities['河北仓'] = new Array('admin');
cities['山西仓'] = new Array('admin');
cities['内蒙古仓'] = new Array('admin');
cities['吉林仓'] = new Array('admin');
cities['青海仓'] = new Array('admin');
cities['陕西仓'] = new Array('admin');
cities['甘肃仓'] = new Array('admin');
cities['重庆仓'] = new Array('admin');
cities['四川仓'] = new Array('admin');
cities['黑龙江仓'] = new Array('admin');
cities['上海仓'] = new Array('admin');
function set_pt(type, pt) {
var pv, cv;
var i, ii;
pv = type.value;
cv = pt.value;
pt.length = 1;
if (pv == '0') return;
if (typeof(cities[pv]) == 'undefined') return;
for (i = 0; i < cities[pv].length; i++) {
ii = i + 1;
pt.options[ii] = new Option();
pt.options[ii].text = cities[pv][i];
pt.options[ii].value = cities[pv][i];
}
}
</script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</html>
解决思路： 监听下拉框 select 的change 事件 ，数据改变时切换 table的数据
要实现下拉列表中的联动，需要使用 JavaScript 来监听下拉列表的变化事件，然后根据选中的值来改变表格内容。
以下是一个示例代码，假设你有一个下拉列表和一个表格，下拉列表中包含班级选项，表格中包含所有班级的数据。当用户在下拉列表中选择某个班级时，表格中只显示该班级的数据。
HTML 代码：
<select id="class-select">
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
<table id="class-table">
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td>小明</td>
<td>1</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>2</td>
<td>80</td>
</tr>
<tr>
<td>小张</td>
<td>1</td>
<td>85</td>
</tr>
<tr>
<td>小王</td>
<td>3</td>
<td>95</td>
</tr>
</table>
JavaScript 代码：
// 获取下拉列表和表格的 DOM 元素
const classSelect = document.getElementById('class-select');
const classTable = document.getElementById('class-table');
// 监听下拉列表的 change 事件
classSelect.addEventListener('change', function(event) {
// 获取选中的班级
const selectedClass = event.target.value;
// 遍历表格中的每一行
const rows = classTable.rows;
for (let i = 1; i < rows.length; i++) { // 跳过表头行
const row = rows[i];
// 如果该行的班级与选中的班级相同，则显示该行；否则隐藏该行
if (row.cells[1].textContent === selectedClass) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
});
这段代码中，我们使用 addEventListener 方法来监听下拉列表的 change 事件，当用户选择了一个班级时，会触发该事件。我们从事件对象中获取选中的班级，然后遍历表格中的每一行，根据该行的班级与选中的班级是否相同来决定是否显示该行。当表格中的所有行都被遍历完后，只有与选中班级相同的行才会被显示出来。
希望这个示例能够帮到你。
其他评论都是用的重新赋值重新渲染表格，我们换种思路，直接切换显示隐藏，不用考虑赋值和重新渲染，简单粗暴；
<strong>班级：</strong>
<select size=1 style="width:200px;" onchange='f1(this)'>
<option>一班</option>
<option>二班</option>
</select><br><br>
<table>
<tr>
<td>表头1</td>
<td>表头2</td>
</tr>
<tr id='tr2' style="visibility:visible;">
<td>一班数据</td>
<td>一班数据</td>
</tr>
<tr id='tr2' style="visibility:hidden;">
<td>二班数据</td>
<td>二班数据</td>
</tr>
</table>
js
function f1(obj){
if(obj.value=='一班') {
document.getElementById('tr1').style.visibility='visible';
document.getElementById('tr2').style.visibility='hidden';
}
if(obj.value=='二班'){
document.getElementById('tr1').style.visibility='hidden';
document.getElementById('tr2').style.visibility='visible';
}
}
本方法适合数据不多不复杂情况，如果有用，请采纳！有其他不懂欢迎来问
示例：
<!DOCTYPE html>
<html>
<head>
<title>下拉列表联动</title>
<script>
function selectClass() {
var classSelect = document.getElementById("classSelect");
var selectedValue = classSelect.options[classSelect.selectedIndex].value;
var tableRows = document.getElementsByTagName("tr");
for (var i = 1; i < tableRows.length; i++) {
var row = tableRows[i];
var classCell = row.cells[1];
if (classCell.innerHTML == selectedValue || selectedValue == "All") {
row.style.display = "";
} else {
row.style.display = "none";
}
}
}
</script>
</head>
<body>
<select id="classSelect" onchange="selectClass()">
<option value="All">All Classes</option>
<option value="Class 1">Class 1</option>
<option value="Class 2">Class 2</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>Score</th>
</tr>
<tr>
<td>Student 1</td>
<td>Class 1</td>
<td>85</td>
</tr>
<tr>
<td>Student 2</td>
<td>Class 2</td>
<td>90</td>
</tr>
<tr>
<td>Student 3</td>
<td>Class 1</td>
<td>95</td>
</tr>
<tr>
<td>Student 4</td>
<td>Class 2</td>
<td>80</td>
</tr>
</table>
</body>
</html>
监听 select 的onchange 事件
无非就是js脚本呗 推荐vue模式来实现更简单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表联动示例</title>
</head>
<body>
<p>请选择班级：</p>
<select id="class">
<option value="一班">一班</option>
<option value="二班">二班</option>
</select>
<p>请选择学生：</p>
<select id="student">
</select>
<p>表格显示：</p>
<table id="table">
</table>
</body>
<script >
//假设有两个下拉列表，id分别为class和student，以及一个表格，id为table
//假设有一个二维数组，存储每个班级的学生信息，例如
var data = [
["张三", "李四", "王五"],
["赵六", "孙七", "周八"]
];
//给第一个下拉列表添加事件监听器
var classSelect = document.getElementById("class");
classSelect.addEventListener("change", function() {
//获取选中的班级的索引
var index = classSelect.selectedIndex;
//获取对应的学生数组
var students = data[index];
//获取第二个下拉列表
var studentSelect = document.getElementById("student");
//清空原有的选项
studentSelect.innerHTML = "";
//添加新的选项
for (var i = 0; i < students.length; i++) {
var option = document.createElement("option");
option.value = students[i];
option.innerText = students[i];
studentSelect.appendChild(option);
}
//获取表格
var table = document.getElementById("table");
//清空原有的内容
table.innerHTML = "";
//添加新的内容
for (var i = 0; i < students.length; i++) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = students[i];
tr.appendChild(td);
table.appendChild(tr);
}
});
</script>
</html>
题主，这个问题我来替你解决，若有帮助，还望采纳，点击回答右侧采纳即可。
我给你举个例子模拟一下：
省市联动demo
首先我们需要省市的数据:就是一个包含所有省的数组，而且每个省中有一个城市数组。这里我是写北京为例子。
var data = [
{
"province": "北京",
"city": [
{
"cname": "北京",
"code": "101010100"
},
{
"cname": "朝阳",
"code": "101010300"
},
{
"cname": "顺义",
"code": "101010400"
},
{
"cname": "怀柔",
"code": "101010500"
},
{
"cname": "通州",
"code": "101010600"
},
...
]
},
....]
然后我们先在页面上显示两个下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所在地区</title>
</head>
<body>
<select id="province"></select>省
<select id="city"></select>市
<script src="js/data.js"></script>
<script src="js/mycity.js"></script>
</body>
</html>
对应的JavaScript的代码：先对数组进行遍历得到的是所有的省，再对每个省遍历就能改省的所有城市。通过创建和添加option节点在页面上显示。
// 对数据进行遍历显示所有省
data.forEach((p, i) => {
//创建一个option节点
let option = document.createElement('option');
//设置option节点文本值
option.textContent = p.province;
//设置option节点的value值
option.value = i;
//向id为province的元素中追加了一个子节点option
$('province').appendChild(option);
//默认在下拉列表加载城市
chooseCity(0);
})
//为向id为province的元素添加‘change’事件
$('province').addEventListener('change', function () {
//在下拉列表中加载城市
chooseCity(this.value);
})
//函数：获取对应省的所有城市
function chooseCity(index) {
//通过索引获取对应的省
let p = data[index];
//清除当前的城市信息
$('city').length = 0;
//获取对应省的所有城市
let cities = p.city;
//对所有城市进行遍历显示
cities.forEach(c => {
//创建一个option1节点
let option1 = document.createElement('option');
//设置option1节点文本值
option1.textContent = c.cname;
//向id为city的元素中追加了一个子节点option1
$('city').appendChild(option1);
})
}
//函数：通过id获取元素
function $(id) {
return document.getElementById(id);
}
以上这样就可以了。
看演示：
方案来自 梦想橡皮擦 狂飙组基于 GPT 编写的 “程秘”
要实现下拉列表的联动，需要使用JavaScript编写事件处理程序。具体实现方法如下：
首先给第一个下拉列表添加一个onchange事件，当下拉列表选中的值发生改变时触发事件处理程序。
在事件处理程序中获取第一个下拉列表选中的值，然后根据选中的值来动态生成第二个下拉列表的选项。
根据第二个下拉列表选中的值来显示对应的表格数据。
下面是一个简单的示例代码，用于说明如何实现下拉列表的联动：
<!-- 第一个下拉列表 -->
<select id="class1" onchange="changeClass1()">
<option value="">请选择班级</option>
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
<!-- 第二个下拉列表 -->
<select id="class2" onchange="showTable()">
<option value="">请选择班级</option>
</select>
<!-- 表格 -->
<table id="table" style="display:none;">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr id="1" style="display:none;">
<td>小明</td>
<td>男</td>
<td>10</td>
</tr>
<tr id="2" style="display:none;">
<td>小红</td>
<td>女</td>
<td>11</td>
</tr>
<tr id="3" style="display:none;">
<td>小刚</td>
<td>男</td>
<td>12</td>
</tr>
</table>
<script>
function changeClass1() {
var class1 = document.getElementById("class1");
var class2 = document.getElementById("class2");
var table = document.getElementById("table");
// 清空第二个下拉列表的选项
class2.options.length = 0;
class2.options.add(new Option("请选择班级", ""));
// 动态生成第二个下拉列表的选项
if (class1.value == "1") {
class2.options.add(new Option("一班学生", "1"));
} else if (class1.value == "2") {
class2.options.add(new Option("二班学生", "2"));
} else if (class1.value == "3") {
class2.options.add(new Option("三班学生", "3"));
}
// 隐藏表格
table.style.display = "none";
}
function showTable() {
var class2 = document.getElementById("class2");
var table = document.getElementById("table");
// 显示对应的表格数据
if (class2.value == "1") {
table.style.display = "block";
document.getElementById("1").style.display = "table-row";
document.getElementById("2").style.display = "none";
document.getElementById("3").style.display = "none";
} else if (class2.value == "2") {
table.style.display = "block";
document.getElementById("1").style