关于"layui"框架选择框不显示的问题的处理

官网源码:

 1 <form class="layui-form" action="">
 2   <div class="layui-form-item">
 3     <label class="layui-form-label">输入框</label>
 4     <div class="layui-input-block">
 5       <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 6     </div>
 7   </div>
 8   <div class="layui-form-item">
 9     <label class="layui-form-label">密码框</label>
10     <div class="layui-input-inline">
11       <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
12     </div>
13     <div class="layui-form-mid layui-word-aux">辅助文字</div>
14   </div>
15   <div class="layui-form-item">
16     <label class="layui-form-label">选择框</label>
17     <div class="layui-input-block">
18       <select name="city" lay-verify="required">
19         <option value=""></option>
20         <option value="0">北京</option>
21         <option value="1">上海</option>
22         <option value="2">广州</option>
23         <option value="3">深圳</option>
24         <option value="4">杭州</option>
25       </select>
26     </div>
27   </div>
28   <div class="layui-form-item">
29     <label class="layui-form-label">复选框</label>
30     <div class="layui-input-block">
31       <input type="checkbox" name="like[write]" title="写作">
32       <input type="checkbox" name="like[read]" title="阅读" checked>
33       <input type="checkbox" name="like[dai]" title="发呆">
34     </div>
35   </div>
36   <div class="layui-form-item">
37     <label class="layui-form-label">开关</label>
38     <div class="layui-input-block">
39       <input type="checkbox" name="switch" lay-skin="switch">
40     </div>
41   </div>
42   <div class="layui-form-item">
43     <label class="layui-form-label">单选框</label>
44     <div class="layui-input-block">
45       <input type="radio" name="sex" value="男" title="男">
46       <input type="radio" name="sex" value="女" title="女" checked>
47     </div>
48   </div>
49   <div class="layui-form-item layui-form-text">
50     <label class="layui-form-label">文本域</label>
51     <div class="layui-input-block">
52       <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
53     </div>
54   </div>
55   <div class="layui-form-item">
56     <div class="layui-input-block">
57       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
58       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
59     </div>
60   </div>
61 </form>
62  
63 <script>
64 //Demo
65 layui.use('form', function(){
66   var form = layui.form;
67   
68   //监听提交
69   form.on('submit(formDemo)', function(data){
70     layer.msg(JSON.stringify(data.field));
71     return false;
72   });
73 });
74 </script>

 

运行结果:

    

 

 

解决方法:

    导入代码从

        

1 <link rel="stylesheet" href="layui/css/layui.css">
2 <script src="layui/layui.all.js"></script>

     换为

  

1 <link rel="stylesheet" href="layui/css/layui.css" media="all">
2 <script src="layui/layui.js" type="text/javascript"></script>
3 <script src="jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

即可达到预期效果:

 

 

posted @ 2020-10-09 21:09  wumingxiaozu  阅读(992)  评论(0编辑  收藏  举报