zoukankan      html  css  js  c++  java
  • 关于"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>

    即可达到预期效果:

  • 相关阅读:
    C语言编程题目(5)单字符的位处理 数据加密
    C语言编程题目(4)文件高级应用与字符串高级操作
    C语言编程题目(3)文件类型操作
    C语言编程题目(2)基本数据类型操作
    个人总结
    第十六周进度条
    十五周进度条
    《人月神话》阅读笔记03
    《人月神话》阅读笔记02
    第十四周进度条
  • 原文地址:https://www.cnblogs.com/2210633591zhang/p/14141025.html
Copyright © 2011-2022 走看看