layui下拉選擇框select不顯示

彈層layer下拉框沒有樣式_不可點擊_沒有效果_渲染失效的解決辦法html

1、必須給表單體系所在的父元素加上 class="layui-form"ajax

在一個容器中設定 class="layui-form"  來標識一個表單元素塊,若是你不想用 form,你能夠換成 div 等任何一個普通元素;記得要在 外層容器 中定義 class="layui-form",form 模塊才能正常工做。app

<form class="layui-form">
    <!-- 這裏是form裏面的代碼 輸入框,選擇框、複選框,單選框等等 -->
</form>

 

2、調用依賴加載模塊:form ui

當你使用表單時,layui 會對 select、checkbox、radio 等原始元素隱藏,從而進行美化修飾處理。但這須要依賴於 form 組件,因此你必須加載 form,而且執行一個實例;spa

在這以前,你須要保證引入 js 的路徑是否正確,也就是要注意 layui 已經成功的引入進來。這就是一個很明顯的路徑錯誤:Uncaught ReferenceError: layui is not defined雙向綁定

layui.use('form', function(){
    var form = layui.form; //只有執行了這一步,部分表單元素纔會自動修飾成功
});

 

3、更新渲染code

有些時候,你的有些表單元素多是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然 layui 不支持雙向綁定機制,但沒有關係,你只須要執行 form.render(type, filter); 方法便可。orm

第一個參數:type,爲表單的 type 類型,可選。默認對所有類型的表單進行一次更新。可局部刷新的 type 以下表:htm

參數(type)值 描述
select 刷新select選擇框渲染
checkbox 刷新checkbox複選框(含開關)渲染
radio 刷新radio單選框框渲染
 
form.render(); //更新所有
form.render('select'); //刷新select選擇框渲染
//……

第二個參數:filter,爲 class="layui-form" 所在元素的 lay-filter="" 的值。你能夠藉助該參數,對錶單完成局部更新。blog

<!-- 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獲取select拼接option而後追加到form表單中的話,記得在最後再更新渲染,不明白的話能夠參照這篇:

 

4、彈層中一樣的原理,須要更新渲染

<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>
相關文章
相關標籤/搜索