javascript中根据下拉框不同的值展示不同的div如何实现代码
时间: 2023-10-31 22:04:12 浏览: 138
可以使用事件监听和DOM操作来实现。以下是一个示例代码:
HTML部分:
```html
<select id="select">
<option value="div1">展示第一个div</option>
<option value="div2">展示第二个div</option>
</select>
<div id="div1" style="display:none;">
这是第一个div
</div>
<div id="div2" style="display:none;">
这是第二个div
</div>
```
JavaScript部分:
```js
var select = document.getElementById("select");
select.addEventListener("change", function() {
// 隐藏所有的div
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
// 显示选中的div
var selectedDivId = select.value;
var selectedDiv = document.getElementById(selectedDivId);
selectedDiv.style.display = "block";
});
```
在上面的示例代码中,我们给下拉框绑定了一个change事件监听器,当用户选择不同的选项时,会触发这个事件。事件处理函数中,首先获取所有的div元素,然后将它们的display样式设置为none,这样就隐藏了所有的div。接着,根据选择的选项的value值获取对应的div元素,并将其display样式设置为block,这样就显示了选中的div。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)