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

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

这是一个很简单的功能,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>
相关文章
|
29天前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
8 0
|
16天前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
5月前
|
JavaScript
jQuery方式追加div覆盖
jQuery方式追加div覆盖
|
29天前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
8 0
|
5月前
|
JavaScript
jQuery清空div内容
jQuery清空div内容
|
3月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
36 0
|
5月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
32 0
|
5月前
|
JavaScript 定位技术
jQuery实现点击图标div循环放大缩小功能
jQuery实现点击图标div循环放大缩小功能
31 0
|
12月前
|
测试技术
Easyui 去除jquery-easui tab页div自带滚动条
Easyui 去除jquery-easui tab页div自带滚动条
77 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
330 0