jquery实现下拉框选中对应的div

最新推荐文章于 2023-10-11 15:59:45 发布

转载最新推荐文章于 2023-10-11 15:59:45 发布 · 714 阅读

文章标签：

#jQuery

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个实用的jQuery技巧，通过下拉菜单的选择，动态显示对应的DIV内容。此功能常见于统计数据展示，根据不同条件筛选信息。示例代码展示了如何使用jQuery监听下拉菜单变化，并隐藏或显示相关联的DIV。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个很简单的功能，jquery实现下拉框选中对应的div。
虽然简单但是会在项目之中经常会用到，尤其是统计的时候，按照不同类型或者不同的年月日来选择相对应的内容。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery实现下拉框选中对应的div</title>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

</head>

<body>

<select onchange="cl(this)">

<option value="1" > 1</option>

<option value="2"> 2</option>

<option value="3"> 3</option>

<option value="4" > 4</option>

<option value="5" > 5</option>

</select>

<div>

<div id="div1">111</div>

<div id="div2" style="display:none;">222</div>

<div id="div3" style="display:none;">333</div>

<div id="div4" style="display:none;">44444</div>

<div id="div5" style="display:none;">55555555</div>

</div>

<script>

function cl(obj){

$(obj).next("div").find("div").each(function(){

$(this).hide();

});

$("#div" + obj.value).show();

}

</script>

</body>

</html>