利用LayUI框架遇到下拉列表显示不出问题

最新推荐文章于 2024-07-14 23:42:27 发布

mo-2016

最新推荐文章于 2024-07-14 23:42:27 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： LayUI 文章标签： LayUI下拉列表问题 LayUI下拉列表 LayUI LayUI下拉下拉列表

本文链接：https://blog.youkuaiyun.com/qq_40825627/article/details/84501395

LayUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个关于layui框架中选择框元素初始化的问题及解决方法。作者分享了一段包含城市选项的HTML代码，并展示了如何通过调整JavaScript加载顺序，正确初始化layui的选择框组件，最终达到预期的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我的部分代码是这样的

<form class="layui-form" action="">
            <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                   <div class="layui-input-block">
                   <select name="city" lay-verify="required">
                             <option value=""></option>
                             <option value="0">北京</option>
                              <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="7">潮州</option>
                               <option value="8">厦门</option>
                    </select>
                    </div>
               </div>
</form>

<script>
     //JavaScript代码区域
      layui.use('element','form', function(){
          var element = layui.element;
          var form=layui.form;
      });
</script>

显示的效果如下：
在这里插入图片描述
没有达到预期的效果

下面是解决方法：
把

<script>
     //JavaScript代码区域
      layui.use('element', function(){
          var element = layui.element;
      });
</script>
<script>
    layui.use('form',function () {
       var form=layui.form;
    });
</script>

就这样可以达到预期的效果
效果图如下：
在这里插入图片描述