layui根据select选项不同显示不同的DIV

layui是一个用户比较多的前端开发框架之一。其优点就是开发便捷、界面美观等。这篇笔记主要实现的是根据下拉选框中选择不同的值，出现不同的DIV（显示不同的内容）。这个描述应该大家能够理解哈。其大致示例图如下：

layui根据select选项显示div

HTML部分源码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta charset="utf-8">
  6.         <title>layui</title>
  7.         <meta name="renderer" content="webkit">
  8.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  10.         <link rel="stylesheet" href="css/layui.css"  media="all">
  11.         <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  12.         <style type="text/css">
  14.             #formInform_name{
  15.                 width:60%;
  16.                 float: left;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div  class="">
  22.             <div id="formInform_name" class="layui-form-item">
  23.                 <label class="layui-form-label">企业</label>
  24.                 <div  class="layui-input-block">
  25.                     <input id="search_info" type="text" name="title" required="" lay-verify="required" placeholder="搜索" autocomplete="off" class="layui-input">
  26.                 </div>
  27.             </div>
  28.             <div>
  29.                   <div id="search_btn" class="layui-btn layui-btn-normal">搜索</div>
  30.             </div>
  31.             <form class="layui-form" >
  32.             <div class="layui-form-item">
  33.                 <label class="layui-form-label">企业名称</label>
  34.                 <div class="layui-input-block">
  35.                   <input id="change_info" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="企业名称" class="layui-input">
  36.                 </div>
  37.                 <div  style="display:none;">
  38.                     <label class="layui-form-label">企业ID</label>
  39.                     <div class="layui-input-block">
  40.                       <input hidden="hidden" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="企业名称" class="layui-input">
  41.                     </div>
  42.                 </div>
  43.             </div>
  45.             <div id="selected" class="layui-form-item">
  46.                 <label class="layui-form-label">置顶类型</label>
  47.                 <div class="layui-input-inline">
  48.                   <select lay-filter="test" >
  49.                     <option value="" selected="">请选择</option>
  50.                     <option class="layui-btn" value="0">展商列表</option>
  51.                     <option class="layui-btn" value="1">区域置顶</option>
  52.                     <option class="layui-btn" value="2">行业置顶</option>
  53.                   </select>
  54.                 </div>
  55.             </div>
  57.             <div id="show_add" class="layui-form-item" style="display:none;">
  58.                 <label class="layui-form-label">区域地区</label>
  59.                 <div class="layui-input-inline">
  60.                   <select name="quiz1">
  61.                     <option value="1" selected="">请选择省</option>
  62.                     <option value="浙江">浙江省</option>
  63.                     <option value="你的工号">江西省</option>
  64.                     <option value="你最喜欢的老师">福建省</option>
  65.                   </select>
  66.                 </div>
  67.                 <div class="layui-input-inline" >
  68.                   <select name="quiz2">
  69.                     <option value="1">请选择市</option>
  70.                     <option value="杭州">杭州</option>
  71.                     <option value="宁波">宁波</option>
  72.                     <option value="温州">温州</option>
  73.                     <option value="温州">台州</option>
  74.                     <option value="温州">绍兴</option>
  75.                   </select>
  76.                 </div>
  77.                 <div class="layui-input-inline lay">
  78.                   <select name="quiz3">
  79.                     <option value="">区域地区</option>
  80.                     <option value="西湖区">西湖区</option>
  81.                     <option value="余杭区">余杭区</option>
  82.                     <option value="拱墅区">临安市</option>
  83.                   </select>
  84.                 </div>
  85.             </div>
  87.             <div id="show_HY" class="layui-form-item" style="display: none;">
  88.                 <label class="layui-form-label">选择行业</label>
  89.                 <div class="layui-input-inline">
  90.                   <select name="quiz1">
  91.                     <option value="" selected="">一级</option>
  92.                     <option value="浙江">浙江省</option>
  93.                     <option value="你的工号">江西省</option>
  94.                     <option value="你最喜欢的老师">福建省</option>
  95.                   </select>
  97.                 </div>
  98.                 <div class="layui-input-inline">
  99.                   <select name="quiz2">
  100.                     <option value="">二级</option>
  101.                     <option value="杭州">杭州</option>
  102.                     <option value="宁波" disabled="">宁波</option>
  103.                     <option value="温州">温州</option>
  104.                     <option value="温州">台州</option>
  105.                     <option value="温州">绍兴</option>
  106.                   </select>
  107.                 </div>
  108.             </div>
  110.             <div class="layui-form-item" style="padding:10px 0 ;">
  111.               <div class="layui-input-block">
  112.                 <button class="layui-btn" >保存</button>
  113.                 <button type="reset" class="layui-btn layui-btn-primary">取消</button>
  114.               </div>
  115.             </div>
  117.           </form>
  119.         <script src="layui.js" charset="utf-8"></script>
  120.         <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
  121.         <script>
  122.             layui.use(['form','layer','jquery'], function(){
  123.                 var $ = layui.jquery,
  124.                     layer = layui.layer,
  125.                     form = layui.form;
  126.                 form.on('select(test)', function(data){
  127.                     console.log(data)
  128.                     console.log(data.elem); //得到select原始DOM对象
  129.                     console.log(data.value); //得到被选中的值
  130.                     console.log(data.othis); //得到美化后的DOM对象
  131.                     var value = data.value;
  132.                     if(value == "" || value == "0"){
  133.                         $("#show_add").hide();
  134.                         $("#show_HY").hide();
  135.                     }else if(value == "1"){
  136.                         $("#show_add").show();
  137.                         $("#show_HY").hide();
  138.                     }else{
  139.                         $("#show_add").hide();
  140.                         $("#show_HY").show();
  141.                     }
  143.                 })
  144.             })
  145.         </script>
  146.     </body>
  147. </html>

关于完整源码可点击此处下载：

 

 

 

文件下载

社区直播小程序点击获取
免费下载
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！