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


Posted in Javascript onSeptember 24, 2019

给代码添加如下部分:

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下拉选择框不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
详解Vue之计算属性
Jun 20 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
layui多图上传实现删除功能的例子
Sep 23 #Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 #Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 #Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
PHP脚本数据库功能详解(下)
2006/10/09 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
幼儿园小班评语
2014/04/18 职场文书
辅导员评语
2014/05/04 职场文书
垃圾桶标语
2014/06/24 职场文书
小平您好观后感
2015/06/09 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
python文件目录操作之os模块
2021/05/08 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL