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

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


5640239-1738806fbfe032a2.png
<!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>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值