Layuiドロップダウン選択ボックスselectは表示されません

14635 ワード

弾層layerドロップダウンボックスにスタイルがありません_クリック不可_効果なしレンダリングの無効化の解決策
一、フォームシステムが存在する親要素にclass=「layui-form」を付ける必要がある
コンテナにclass=「layui-form」を設定してフォーム要素ブロックを識別します.formを使用したくない場合はdivなどの一般的な要素に変更できます.外層コンテナでclass=「layui-form」を定義すると、formモジュールが正常に動作します.
<form class="layui-form">
    
form>

 
二、呼び出し依存ロードモジュール:form
フォームを使用すると、layuiはselect、checkbox、radioなどの元の要素を非表示にし、美化修飾処理を行います.しかし、これはformコンポーネントに依存する必要があるので、formをロードし、インスタンスを実行する必要があります.
その前に、jsを導入する経路が正しいかどうかを保証する必要があります.つまり、layuiが正常に導入されたことに注意する必要があります.(これは明らかなパスエラーです:Uncaut ReferenceError:layui is not defined)
layui.use('form', function(){
    var form = layui.form; //
});

 
三、レンダリングの更新
フォーム要素の一部が動的に挿入されている場合があります.このときformモジュールの自動レンダリングは無効になります.layuiは双方向バインドメカニズムをサポートしていませんが、大丈夫です.formを実行するだけです.render(type, filter);方法でいいです.
最初のパラメータ:type、フォームのtypeタイプ、オプション.デフォルトでは、すべてのタイプのフォームが更新されます.ローカルリフレッシュ可能なtypeは次の表に示されています.
パラメータ値
説明
select
select選択ボックスレンダリングのリフレッシュ
checkbox
checkboxチェックボックス(スイッチを含む)レンダリングのリフレッシュ
radio
radioラジオボックスレンダリングのリフレッシュ
 
form.render(); // 
form.render('select'); // select 
//……

2番目のパラメータ:class=「layui-form」が存在する要素のlay-filter=「」の値です.このパラメータを使用して、フォームのローカル更新を完了できます.

<div class="layui-form" lay-filter="test1">div>
 
<div class="layui-form" lay-filter="test2">div>

<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フォームに追加した場合、最後にレンダリングを更新することを覚えておいてください.分からない場合は、この記事を参照してください.
 
四、弾層の中で同じ原理で、レンダリングを更新する必要がある
<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>