Layui动态生成select下拉选择框不显示的解决方法

000

给代码添加如下部分:

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

实现效果:

Layui动态生成select下拉选择框不显示的解决方法

HTML代码:

<div class=\"layui-form-item\">
 <label class=\"layui-form-label\">执行周期</label>
 <div class=\"layui-input-inline\" style=\"width: 90px;\">
  <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\" style=\"width: 90px;\">
   <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\" style=\"width: 60px;\">
   <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
  </div>
  <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
   <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
  </div>
  <div class=\"layui-input-inline\" style=\"width: 60px;\">
   <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
  </div>
  <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
   <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
  </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\" style=\"width: 90px; height: 36px; font-size: 14px;\" id=\"weekid\" >
   <select name=\"week\" style=\"height: 36px;\">
    <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\" style=\"width: 60px;\">
   <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
  </div>
  <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
   <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
  </div>
  <div class=\"layui-input-inline\" style=\"width: 60px;\">
   <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
  </div>
  <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
   <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
  </div>
 </div>`);
    layui.use(\'form\', function(){ //此段代码必不可少
     var form = layui.form;
     form.render();
    });
    break;
   case 2: //每天
    $(\"#suboption\").append(` <div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
   case 3: //N天
    $(\"#suboption\").append(` <div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"where1\" value=\"3\" max=\"31\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"天\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
   case 4: //每小时
    $(\"#suboption\").append(`<div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
   case 5: //N小时
    $(\"#suboption\").append(` <div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
   case 6: //N分钟
    $(\"#suboption\").append(`<div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"3\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
   case 7: //每月
    $(\"#suboption\").append(` <div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"where1\" value=\"3\" max=\"31\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"日\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"hour\" value=\"1\" max=\"23\" maxlength=\"2\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"小时\" style=\" background-color: #f6f6f6;\">
   </div>
   <div class=\"layui-input-inline\" style=\"width: 60px;\">
    <input type=\"number\" name=\"minute\" value=\"30\" maxlength=\"2\" max=\"59\" min=\"0\" class=\"layui-input\"/>
   </div>
   <div class=\"layui-input-inline\" style=\"width: 50px; vertical-align: middle; margin-left: -11px;\">
    <input type=\"text\" class=\"layui-input\" readonly value=\"分钟\" style=\" background-color: #f6f6f6;\">
   </div>
  </div>`);
    break;
  }
 });

});

以上这篇Layui动态生成select下拉选择框不显示的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
30天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
27天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
27天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
30天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
27天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
27天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
30天前 24
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
30天前 23
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
31天前 23
【jQuery Demo】图片切换效果整理-偶像资源网
【jQuery Demo】图片切换效果整理
【jQuery Demo】图片切换效果整理
28天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容