Layui 기반 Infinity Selector 구현 방법(코드 포함)

이 글의 내용은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(['form',"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: 'A',
            label: 'a',
            children: [
                {
                    value: 'AA1',
                    label: 'aa1',
                },
                {
                    value: 'BB1',
                    label: 'bb1'
                }
            ]
        },
        {
            value: 'B',
            label: 'b',
        }
    ]
    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. 데이터: 필수 정적 데이터, 유형은 배열,
3. url: 비동기적으로 얻은 데이터, 유형은 배열, (두 매개변수 data 및 url 중 하나 선택)
4. 메소드, 기본 가져오기, 생략 가능
5, 여기서: 매개변수에 비동기적으로 전달됨, 생략 가능
6, TriggerType: 트리거 메소드, 공백으로 두거나 다른 모든 항목은 클릭, 선택적 매개변수" 변경", 즉 즉, 마우스가 트리거
7로 이동합니다. showLastLevels: 입력 상자에 마지막 레벨만 표시되는지 여부, 기본값은 false, 즉 모두 표시
8, value: 전달된 초기 값입니다. , 유형은 배열, 값은 data
9의 값, 성공: 콜백 함수, 선택 완료 후 콜백 함수, 반환 값은 array

#🎜 값입니다. 🎜#

온라인 데모

# 🎜🎜# github 소스 코드
관련 권장 사항:

layui의 프로젝트 최적화 및 비침투적 최적화 분석 세부정보

layui 형식의 동적 렌더링과 vue.js(코드 포함) 간의 충돌 해결 #🎜🎜 #

# 🎜🎜#

위 내용은 Layui 기반 Infinity Selector 구현 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!