Layuiドロップダウン選択ボックスselectは表示されません
14635 ワード
弾層layerドロップダウンボックスにスタイルがありません_クリック不可_効果なしレンダリングの無効化の解決策
一、フォームシステムが存在する親要素にclass=「layui-form」を付ける必要がある
コンテナにclass=「layui-form」を設定してフォーム要素ブロックを識別します.formを使用したくない場合はdivなどの一般的な要素に変更できます.外層コンテナでclass=「layui-form」を定義すると、formモジュールが正常に動作します.
二、呼び出し依存ロードモジュール:form
フォームを使用すると、layuiはselect、checkbox、radioなどの元の要素を非表示にし、美化修飾処理を行います.しかし、これはformコンポーネントに依存する必要があるので、formをロードし、インスタンスを実行する必要があります.
その前に、jsを導入する経路が正しいかどうかを保証する必要があります.つまり、layuiが正常に導入されたことに注意する必要があります.(これは明らかなパスエラーです:Uncaut ReferenceError:layui is not defined)
三、レンダリングの更新
フォーム要素の一部が動的に挿入されている場合があります.このときformモジュールの自動レンダリングは無効になります.layuiは双方向バインドメカニズムをサポートしていませんが、大丈夫です.formを実行するだけです.render(type, filter);方法でいいです.
最初のパラメータ:type、フォームのtypeタイプ、オプション.デフォルトでは、すべてのタイプのフォームが更新されます.ローカルリフレッシュ可能なtypeは次の表に示されています.
パラメータ値
説明
select
select選択ボックスレンダリングのリフレッシュ
checkbox
checkboxチェックボックス(スイッチを含む)レンダリングのリフレッシュ
radio
radioラジオボックスレンダリングのリフレッシュ
2番目のパラメータ:class=「layui-form」が存在する要素のlay-filter=「」の値です.このパラメータを使用して、フォームのローカル更新を完了できます.
注:動的に追加されたselectであればajaxがselectパッチoptionを取得してformフォームに追加した場合、最後にレンダリングを更新することを覚えておいてください.分からない場合は、この記事を参照してください.
四、弾層の中で同じ原理で、レンダリングを更新する必要がある
一、フォームシステムが存在する親要素に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>