layui的select框不出来怎么办


本文摘自PHP中文网,作者藏色散人,侵删。

layui的select框不出来是因为Layui会对select、checkbox、radio等原始元素隐藏,其解决办法就是加载form,并且执行一个实例即可。

本教程操作环境:Windows7系统、layui1.0版,Dell G3电脑。

推荐:《javascript基础教程》《layUI教程》

今天用layui写前端页面时候用到了通过jqurey中的befor追加select元素

一开始写法:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<div class="layui-form-item">

    <label class="layui-form-label">执行人员</label>

    <div  style="width: 150px;display: inline-block;" >

      <select name="city">

        <option value="">选择部门</option>

        <option value="0">北京</option>

      </select>

       </div>---

        <div style="width: 150px;display: inline-block;">

      <select name="city" >

        <option value="">选择人员</option>

        <option value="0">张三</option>

      </select>

 </div>

  

 <button type="button" class="layui-btn" id="addpeop">

  <i class="layui-icon">&#xe608;</i>

</button>

</div>

<script>

$(function(){

$("#addpeop").click(function(){

var peop=$("#addpeod");

var t=$(['<label class="layui-form-label"></label>',

       '<div  style="width: 150px;display: inline-block;" >',

               '<select name="city">',

           '<option value="">选择部门</option>',

          '<option value="0">北京</option>',

         '</select>',

          '</div>---',

           '<div style="width: 150px;display: inline-block;">',

        ' <select name="city" >',

          ' <option value="">选择人员</option>',

               '<option value="0">张三</option>',

               '</select>',

       '</div>',

       '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del">删除</button>'].join(''));

t.find('#del').on('click', function(){

t1.remove();

        });

peop.append(t);

    

})

})

</script>

页面内容:

阅读剩余部分

相关阅读 >>

layui之弹出层关闭和刷新问题

使用layui实现前端分页功能

layui怎么关闭当前弹窗

vue.js的select下拉框怎样绑定事件和取值

html下拉菜单怎么做?html下拉菜单的代码实例介绍

为什么我的layui进度条渲染不出来

iview的select下拉框选项错位怎么处理

webpack打包layui实现步骤

layui图片如何放大

html怎么实现下拉菜单

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...