用js根据select的值控制某一个li的显示与隐藏
时间: 2024-09-19 18:16:16 浏览: 49
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
在JavaScript中,你可以通过监听`select`元素的选择改变事件(`change`),然后获取选中的值,再根据这个值去控制相应的`li`元素的样式,通常是通过切换`display`属性来控制其显示或隐藏。这里是一个简单的例子:
```javascript
// 获取select元素和对应的li列表
var select = document.getElementById('your-select-id');
var liList = document.querySelectorAll('#your-ul-id li');
// 添加选择事件监听器
select.addEventListener('change', function() {
var selectedValue = this.value; // 当前选中的选项值
// 遍历li列表
for (var i = 0; i < liList.length; i++) {
var liElement = liList[i];
// 检查当前li元素的data-value是否等于选中的值
if (liElement.getAttribute('data-value') === selectedValue) {
// 如果匹配,显示li元素
liElement.style.display = 'block';
} else {
// 否则,隐藏li元素
liElement.style.display = 'none';
}
}
});
```
在这个示例中,假设每个`li`元素都有一个"data-value"属性,它的值对应于`select`选项的值。你需要将`your-select-id`和`your-ul-id`替换为你实际的id。
阅读全文