选择框使用的CSS的option datalist ID 为s01 ,选中其中option1 ,option2 和option3 时,table ID =t1 和t2 需要同时加亮,并且弹出消息提示。这个加亮要一直持续,除非选择了非option1 ,option2 和option3 。
时间: 2024-04-15 14:31:58 浏览: 122
可以使用 JavaScript 和 CSS 来实现这个需求。当下拉选择框的值发生变化时,检查选中的值是否是 option1、option2 或 option3,如果是,则给表格 t1 和 t2 添加一个类来实现加亮效果,并弹出消息提示。如果选中的值不是这三个选项,则移除加亮效果。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉选择框示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<select id="s01">
<option value="">请选择</option>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<table id="t1">
<tr>
<td>行1</td>
</tr>
<tr>
<td>行2</td>
</tr>
<tr>
<td>行3</td>
</tr>
</table>
<table id="t2">
<tr>
<td>行4</td>
</tr>
<tr>
<td>行5</td>
</tr>
<tr>
<td>行6</td>
</tr>
</table>
<script>
var selectElement = document.getElementById('s01');
var table1Element = document.getElementById('t1');
var table2Element = document.getElementById('t2');
selectElement.addEventListener('change', function() {
var selectedValue = selectElement.value;
// 清除之前加亮的行
table1Element.classList.remove('highlight');
table2Element.classList.remove('highlight');
// 判断选中的值是否是 option1、option2 或 option3
if (selectedValue === 'option1' || selectedValue === 'option2' || selectedValue === 'option3') {
// 添加加亮效果
table1Element.classList.add('highlight');
table2Element.classList.add('highlight');
// 弹出消息提示
alert('已选中 ' + selectedValue);
}
});
</script>
</body>
</html>
```
在上述代码中,通过给下拉选择框绑定 `change` 事件,当选中值发生变化时,会触发事件处理函数。在事件处理函数中,首先清除之前加亮的行,然后判断选中的值是否是 option1、option2 或 option3。如果是,则给表格 t1 和 t2 添加一个类来实现加亮效果,并弹出消息提示。如果选中的值不是这三个选项,则移除加亮效果。
你可以根据实际情况修改代码中的 ID 和选项值来适应你的页面布局和需求。同时,你可以根据需要自定义加亮效果和消息提示的样式。
阅读全文