彈層layer選擇框沒有樣式_不可點擊_渲染失效的解決辦法
一、必須給表單體系所在的父元素加上
在一個容器中設定 來標識一個表單元素塊，如果你不想用 form，你可以換成 div 等任何一個普通元素（推薦用 form）；記得要在 外層容器 中定義 ，form 模塊才能正常作業，
<form class="layui-form"> <!-- 這里是form里面的代碼 輸入框，選擇框、復選框，單選框等等 --> </form>
二、呼叫依賴加載模塊：form
當你使用表單時，layui 會對 select、checkbox、radio 等原始元素隱藏，從而進行美化修飾處理，但這需要依賴于 form 組件，所以你必須加載 form，并且執行一個實體；
在這之前，你需要保證引入 js 的路徑是否正確，也就是要注意 layui 已經成功的引入進來，（這就是一個很明顯的路徑錯誤：Uncaught ReferenceError: layui is not defined）
layui.use('form', function(){
var form = layui.form; //只有執行了這一步，部分表單元素才會自動修飾成功
});
三、更新渲染
有些時候，你的有些表單元素可能是動態插入的，這時 form 模塊 的自動化渲染是會對其失效的，雖然 layui 不支持雙向系結機制，但沒有關系，你只需要執行 form.render(type, filter); 方法即可，
第一個引數：type，為表單的 type 型別，可選，默認對全部型別的表單進行一次更新，可區域重繪的 type 如下表：
| 引數（type）值 | 描述 |
|---|---|
| select | 重繪select選擇框渲染 |
| checkbox | 重繪checkbox復選框（含開關）渲染 |
| radio | 重繪radio單選框框渲染 |
form.render(); //更新全部 form.render('select'); //重繪select選擇框渲染 //……
第二個引數：filter，為 所在元素的 lay-filter="" 的值，你可以借助該引數，對表單完成區域更新，
<!-- HTML 示例 --> <div class="layui-form" lay-filter="test1"> … </div> <div class="layui-form" lay-filter="test2"> … </div> <!-- JS 示例 --> <script> layui.use('form', function(){ var form = layui.form, form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器內的全部表單狀態 form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態 //…… }); </script>
注意：如果是動態添加的select，可能是 ajax 獲取到資料后 拼接 option 然后追加到 select 下拉選擇框中，記得在最后更新渲染 form.render();
四、彈層中同樣的原理，需要更新渲染
<div id="layer-test" style="display: none;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">行業型別</label> <div class="layui-input-block"> <select name="industry" id="industry" lay-filter="industry"> <option value>選擇行業型別</option> <option value="1001">IT服務</option> <option value="1002">制造業</option> <option value="1003">批發/零售</option> <option value="1004">生活服務</option> </select> </div> </div> </form> </div> <script src="layui/layui.js"></script> <script> layui.use('form', function(){ var form = layui.form, $ = layui.$; //layer示例 layer.open({ type: 1, title: ['彈層示例'], shade: 0.4, area:['900px', '650px'], content: $("#layer-test").html(), success: function(layero, index){ // 重新渲染彈層中的下拉選擇框select form.render('select'); } }); }); </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156519.html
標籤：JavaScript
上一篇：ES6 class