Layui如何动态生成select下拉选择框不显示

小编给大家分享一下Layui如何动态生成select下拉选择框不显示，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

富宁网站建设公司创新互联,富宁网站设计制作，有大型网站制作公司丰富经验。已为富宁近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的富宁做网站的公司定做！

给代码添加如下部分:

layui.use('form', function(){ //此段代码必不可少
 var form = layui.form;
 form.render();
});

实现效果:

HTML代码:

<div class="layui-form-item">
 <label class="layui-form-label">执行周期</label>
 <div class="layui-input-inline" >
  <select name="period_type" lay-verify="required" lay-filter="period">
   <option value="week">每星期</option>
   <option value="day">每天</option>
   <option value="day-n">N天</option>
   <option value="hour">每小时</option>
   <option value="hour-n">N小时</option>
   <option value="minute-n">N分钟</option>
   <option value="month">每月</option>
  </select>
 </div>
 <div id="suboption">
  <!-- 默认每星期 -->
  <div>
  <div class="layui-input-inline" >
   <select name="week">
    <option value="1">周一</option>
    <option value="2">周二</option>
    <option value="3">周三</option>
    <option value="4">周四</option>
    <option value="5">周五</option>
    <option value="6">周六</option>
    <option value="0">周日</option>
   </select>
  </div>
  <div class="layui-input-inline" >
   <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
  </div>
  <div class="layui-input-inline" >
   <input type="text" class="layui-input" readonly value="小时" >
  </div>
  <div class="layui-input-inline" >
   <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
  </div>
  <div class="layui-input-inline" >
   <input type="text" class="layui-input" readonly value="分钟" >
  </div>
 </div>
 </div>

</div>

layui.use('form', function(){
 var form = layui.form;
 form.on('select(period)', function(data){
  var num = data.elem.selectedIndex; //获取对应option的索引排序
  num = num + 1;
  $('#suboption').empty();
  switch (num)
  {
   case 1: //每星期
    $("#suboption").append(`<div>
  <div class="layui-input-inline"  id="weekid" >
   <select name="week" >
    <option value="1">周一</option>
    <option value="2">周二</option>
    <option value="3">周三</option>
    <option value="4">周四</option>
    <option value="5">周五</option>
    <option value="6">周六</option>
    <option value="0">周日</option>
   </select>
  </div>
  <div class="layui-input-inline" >
   <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
  </div>
  <div class="layui-input-inline" >
   <input type="text" class="layui-input" readonly value="小时" >
  </div>
  <div class="layui-input-inline" >
   <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
  </div>
  <div class="layui-input-inline" >
   <input type="text" class="layui-input" readonly value="分钟" >
  </div>
 </div>`);
    layui.use('form', function(){ //此段代码必不可少
     var form = layui.form;
     form.render();
    });
    break;
   case 2: //每天
    $("#suboption").append(` <div>
   <div class="layui-input-inline" >
    <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="小时" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
   case 3: //N天
    $("#suboption").append(` <div>
   <div class="layui-input-inline" >
    <input type="number" name="where1" value="3" max="31" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="天" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="小时" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
   case 4: //每小时
    $("#suboption").append(`<div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
   case 5: //N小时
    $("#suboption").append(` <div>
   <div class="layui-input-inline" >
    <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="小时" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
   case 6: //N分钟
    $("#suboption").append(`<div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="3" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
   case 7: //每月
    $("#suboption").append(` <div>
   <div class="layui-input-inline" >
    <input type="number" name="where1" value="3" max="31" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="日" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="hour" value="1" max="23" maxlength="2" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="小时" >
   </div>
   <div class="layui-input-inline" >
    <input type="number" name="minute" value="30" maxlength="2" max="59" min="0" class="layui-input"/>
   </div>
   <div class="layui-input-inline" >
    <input type="text" class="layui-input" readonly value="分钟" >
   </div>
  </div>`);
    break;
  }
 });

});

看完了这篇文章，相信你对“Layui如何动态生成select下拉选择框不显示”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享名称：Layui如何动态生成select下拉选择框不显示
文章路径：https://www.cdcxhl.com/article0/iihgoo.html

成都网站建设公司_创新互联，为您提供企业网站制作、品牌网站建设、网站排名、网站营销、服务器托管、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联