1. 程式人生 > >利用LayUI框架遇到下拉列表顯示不出問題

利用LayUI框架遇到下拉列表顯示不出問題

首先我的部分程式碼是這樣的

<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>

就這樣可以達到預期的效果
效果圖如下:
在這裡插入圖片描述