单选-三级级联

技术栈: vue + jquery

一级用ajax加载出来,点击一级的选项对应的二级出来,点击二级对应的选项三级出来. 然后根据拿到选择的值.

预览:

HTML:

<div id="app-1">
        <div id="app-search">
            <div>分类:</div>
            <div>
                <select v-show="isShowLevelSearch1" id="yy_search_classifyId_1" @change="searchLevel1($event)">
                    <option value="">请选择一级</option>
                    <option v-for="level in levels1" v-bind:value="level.id">{{ level.name }}
                    </option>
                </select>
            </div>
            <div>
                <select v-show="isShowLevelSearch2" id="yy_search_classifyId_2" @change="searchLevel2($event)">
                    <option value="">请选择二级</option>
                    <option v-for="level in levels2" v-bind:value="level.id">{{ level.name }}
                    </option>
                </select>
            </div>
            <div>
                <select v-show="isShowLevelSearch3" id="yy_search_classifyId_3" @change="searchLevel3($event)">
                    <option value="">请选择三级</option>
                    <option v-for="level in levels3" v-bind:value="level.id">{{ level.name }}
                    </option>
                </select>
            </div>
        </div>
        <button @click="selectValue()">选中</button>
    </div>

JS:

var baseURL = '${ctx.contextPath}';
        var app1 = new Vue({
            el: '#app-1',
            data: {
                levels1: [],
                levels2: [],
                levels3: [],
                isShowLevelSearch1: true,
                isShowLevelSearch2: false,
                isShowLevelSearch3: false
            },
            methods: {
                //搜索栏的分类三级
                searchLevel1: function (enent) {
                    //获取选择框的value值
                    // console.log(event.target.value)
                    var id = event.target.value;
                    this.isShowLevelSearch2 = true;
                    this.isShowLevelSearch3 = false;
                    $("#yy_search_classifyId_2").val('');
                    $("#yy_search_classifyId_3").val('');
                    //classifyLevel2(id) 点击拿到二级选项
                },
                searchLevel2: function (enent) {
                    // console.log(event.target.value)
                    $("#yy_search_classifyId_3").val('');
                    //获取选择框的value值
                    var id = event.target.value
                    this.isShowLevelSearch3 = true;
                    // classifyLevel3(id) 点击拿到三级选项
                },
                selectValue: function () {
                    //拿到选中的值
                    if ($('#yy_search_classifyId_3 option:selected').val() !== '') {
                        var classifyId = $('#yy_search_classifyId_3 option:selected').val()
                    } else if ($('#yy_search_classifyId_3 option:selected').val() === '' && $('#yy_search_classifyId_2 option:selected').val() !== '') {
                        var classifyId = $('#yy_search_classifyId_2 option:selected').val()
                    } else if ($('#yy_search_classifyId_3 option:selected').val() === '' && $('#yy_search_classifyId_2 option:selected').val() === '') {
                        var classifyId = $('#yy_search_classifyId_1 option:selected').val()
                    }
                    console.log(classifyId)
                }
            }
        });

        //级联一级
        function classifyLevel1(id) {
            $.ajax({
                url: baseURL + '/api/common/findAllLevel',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    'classifyId': id
                }
            }).done(function (res) {
                app1.levels1 = res.data
            }).fail(function () {
                console.log('初始化失败! 请刷新重试!')
            })
        }
        //级联二级
        function classifyLevel2(id) {
            $.ajax({
                url: baseURL + '/api/common/findAllLevel',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    'classifyId': id
                }
            }).done(function (res) {
                app1.levels2 = res.data
            }).fail(function () {
                console.log('初始化失败! 请刷新重试!')
            })
        }
        //级联三级
        function classifyLevel3(id) {
            $.ajax({
                url: baseURL + '/api/common/findAllLevel',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    'classifyId': id
                }
            }).done(function (res) {
                app1.levels3 = res.data
            }).fail(function () {
                console.log('初始化失败! 请刷新重试!')
            })
        }

搞定了,下次copy.