layui下select下拉框不顯示或沒有效果
彈層layer選擇框沒有樣式_不可點(diǎn)擊_渲染失效的解決辦法
一、必須給表單體系所在的父元素加上 class="layui-form"
在一個(gè)容器中設(shè)定?class="layui-form"??來標(biāo)識(shí)一個(gè)表單元素塊，如果你不想用 form，你可以換成?div?等任何一個(gè)普通元素（推薦用 form）；記得要在 外層容器 中定義?class="layui-form"，form 模塊才能正常工作。
<form class="layui-form"> <!-- 這里是form里面的代碼 輸入框，選擇框、復(fù)選框，單選框等等 --> </form>
二、調(diào)用依賴加載模塊：form?
當(dāng)你使用表單時(shí)，layui 會(huì)對(duì) select、checkbox、radio 等原始元素隱藏，從而進(jìn)行美化修飾處理。但這需要依賴于 form 組件，所以你必須加載?form，并且執(zhí)行一個(gè)實(shí)例；
在這之前，你需要保證引入 js 的路徑是否正確，也就是要注意?layui 已經(jīng)成功的引入進(jìn)來。（這就是一個(gè)很明顯的路徑錯(cuò)誤：Uncaught ReferenceError: layui is not defined）
layui.use('form', function(){
var form = layui.form; //只有執(zhí)行了這一步，部分表單元素才會(huì)自動(dòng)修飾成功
});
三、更新渲染
有些時(shí)候，你的有些表單元素可能是動(dòng)態(tài)插入的。這時(shí) form 模塊 的自動(dòng)化渲染是會(huì)對(duì)其失效的。雖然 layui 不支持雙向綁定機(jī)制，但沒有關(guān)系，你只需要執(zhí)行?form.render(type, filter);?方法即可。
第一個(gè)參數(shù)：type，為表單的 type 類型，可選。默認(rèn)對(duì)全部類型的表單進(jìn)行一次更新?？删植克⑿碌?type 如下表：
| 參數(shù)（type）值 | 描述 |
|---|---|
| select | 刷新select選擇框渲染 |
| checkbox | 刷新checkbox復(fù)選框（含開關(guān)）渲染 |
| radio | 刷新radio單選框框渲染 |
form.render(); //更新全部 form.render('select'); //刷新select選擇框渲染 //……
第二個(gè)參數(shù)：filter，為?class="layui-form"?所在元素的?lay-filter=""?的值。你可以借助該參數(shù)，對(duì)表單完成局部更新。文章來源：http://www.zghlxwxcb.cn/news/detail-493320.html
<!-- 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" 所在容器內(nèi)的全部表單狀態(tài) form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內(nèi)的全部 select 狀態(tài) //…… }); </script>
注意：如果是動(dòng)態(tài)添加的select，可能是 ajax 獲取到數(shù)據(jù)后 拼接 option 然后追加到 select 下拉選擇框中，記得在最后更新渲染?form.render();文章來源地址http://www.zghlxwxcb.cn/news/detail-493320.html
四、彈層中同樣的原理，需要更新渲染
<div id="layer-test" style="display: none;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">行業(yè)類型</label> <div class="layui-input-block"> <select name="industry" id="industry" lay-filter="industry"> <option value>選擇行業(yè)類型</option> <option value="1001">IT服務(wù)</option> <option value="1002">制造業(yè)</option> <option value="1003">批發(fā)/零售</option> <option value="1004">生活服務(wù)</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>
到了這里，關(guān)于layui下select下拉框不顯示或沒有效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
