在动态表格下拉列表中显示选定选项,可以通过以下步骤实现:
以下是一个示例代码,演示如何在动态表格下拉列表中显示选定选项:
<!DOCTYPE html>
<html>
<head>
<title>动态表格下拉列表</title>
</head>
<body>
<table id="dynamic-table">
<tr>
<td>属性1:</td>
<td>
<select id="attribute1" onchange="updateOptions()">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
</td>
</tr>
<tr>
<td>属性2:</td>
<td>
<select id="attribute2" onchange="updateOptions()">
<option value="option4">选项4</option>
<option value="option5">选项5</option>
<option value="option6">选项6</option>
</select>
</td>
</tr>
</table>
<script>
function updateOptions() {
var attribute1 = document.getElementById("attribute1").value;
var attribute2 = document.getElementById("attribute2").value;
// 更新属性1对应的选项
if (attribute1 === "option1") {
// 设置属性1选项为选项1、选项2、选项3
document.getElementById("attribute2").innerHTML = `
<option value="option4">选项4</option>
<option value="option5">选项5</option>
<option value="option6">选项6</option>
`;
} else if (attribute1 === "option2") {
// 设置属性1选项为选项7、选项8、选项9
document.getElementById("attribute2").innerHTML = `
<option value="option7">选项7</option>
<option value="option8">选项8</option>
<option value="option9">选项9</option>
`;
}
// 更新属性2对应的选项
if (attribute2 === "option4") {
// 设置属性2选项为选项10、选项11、选项12
document.getElementById("attribute1").innerHTML = `
<option value="option10">选项10</option>
<option value="option11">选项11</option>
<option value="option12">选项12</option>
`;
} else if (attribute2 === "option5") {
// 设置属性2选项为选项13、选项14、选项15
document.getElementById("attribute1").innerHTML = `
<option value="option13">选项13</option>
<option value="option14">选项14</option>
<option value="option15">选项15</option>
`;
}
}
</script>
</body>
</html>
在上述示例中,我们创建了一个动态表格,其中包含两个下拉列表(属性1和属性2)。通过监听下拉列表的onchange事件,当属性值发生变化时,调用updateOptions函数来更新另一个下拉列表的选项。根据选定的属性值,我们使用innerHTML属性动态更新下拉列表的选项内容。
请注意,上述示例仅为演示目的,实际应用中可能需要根据具体需求进行适当修改和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云