ホームページ > ウェブフロントエンド > jsチュートリアル > Lauiui に基づいて Infinity Selector を実装する方法 (コード付き)

Lauiui に基づいて Infinity Selector を実装する方法 (コード付き)

不言
リリース: 2018-08-25 15:49:35
オリジナル
3268 人が閲覧しました

この記事の内容は、layui に基づいた Infinity Selector の実装方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

html要素

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <input type="text" id="a" class="layui-input" readonly="readonly">
    </div>
</div>
ログイン後にコピー

jsリファレンス

layui.use([&#39;form&#39;,"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: &#39;A&#39;,
            label: &#39;a&#39;,
            children: [
                {
                    value: &#39;AA1&#39;,
                    label: &#39;aa1&#39;,
                },
                {
                    value: &#39;BB1&#39;,
                    label: &#39;bb1&#39;
                }
            ]
        },
        {
            value: &#39;B&#39;,
            label: &#39;b&#39;,
        }
    ]
    cascader({
        elem: "#a",
        data: data,
        // url: "/aa",
        // type: "post",
        // triggerType: "change",
        // showLastLevels: true,
        // where: {
        //     a: "aaa"
        // },
        value: ["A", "AA1"],
        success: function (data) {
            console.log(data);
        }
    });
});
ログイン後にコピー

cascaderパラメータの説明

1. elem: 入力コンテナ
2. data: 必須の静的データ、型は配列、
3. url: 非同期で取得されたデータ、型は配列、 2 つのパラメータのいずれかを選択します (データと URL)
4. タイプ: 非同期取得メソッド、省略可能
5. パラメータで非同期に渡されます、省略可能
6. トリガー メソッド、Fill in または他のものはすべてクリック、オプションのパラメータ「変更」、つまりマウスを移動してトリガーします
7. showLastLevels: 入力ボックスに最後のレベルのみを表示するかどうか、デフォルトは false、つまりすべてが表示されます
8 . value: 渡される初期値、type は配列、値は data
9 の値です。 成功: コールバック関数、選択が完了した後のコールバック関数、戻り値は value 配列です

デモ
github ソース コード

関連する推奨事項:

Lauiui のプロジェクト最適化と非侵襲的最適化の詳細な分析

Lauiui フォームの動的レンダリングと vue.js (コード付き) の間の競合解決

以上がLauiui に基づいて Infinity Selector を実装する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート