基于jquery的联动下拉框组件

最新推荐文章于 2024-04-20 12:37:22 发布

濯茶的前端思考

最新推荐文章于 2024-04-20 12:37:22 发布

阅读量2.3k

点赞数 1

分类专栏：前端开发文章标签： javascript css

本文链接：https://blog.csdn.net/maoxunxing/article/details/40323957

版权

前端开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

见代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">//这句要加上
    <title></title>
</head>

<body>
	<h2>同步</h2>
    <div>
        <label>国家</label>
        <select id="countrySel"></select>
    </div>
    <div>
        <label>省</label>
        <select id="provSel"></select>
    </div>
    <div>
        <label>市</label>
        <select id="citySel"></select>
    </div>
	<h2>异步</h2>
	<div>
        <label>国家</label>
        <select id="countrySelAysn"></select>
    </div>
    <div>
        <label>省</label>
        <select id="provSelAysn"></select>
    </div>
    <div>
        <label>市</label>
        <select id="citySelAysn"></select>
    </div>
    <button id="change-data-btn">根据根据给定的国家，省的id来赋值</button>

    <script src="jquery-1.11.1.js"></script>
    <script src="jquery-linkage-select.js"></script>
    <script>
    $(document).ready(function() {
        var country = [{
            name: '妖精之国',
            id: 1
        }, {
            name: '兽人之国',
            id: 2
        }];

        var prov = [{
            parent: 1,
            name: '窝窝省',
            id: 1
        }, {
            parent: 1,
            name: '树人省',
            id: 2
        }, {
            parent: 2,
            name: '木叶省',
            id: 3
        }, {
            parent: 2,
            name: '暴走徒省',
            id: 4
        }];

        var cityData = [{
            parent: 1,
            name: '窝窝乡',
            id: 1
        }, {
            parent: 1,
            name: '鸡窝乡',
            id: 2
        }, {
            parent: 2,
            name: '未知1乡',
            id: 3
        }, {
            parent: 4,
            name: '未知2乡',
            id: 4
        }];

        /* 同步数据 */
        var citySel = $('#citySel').linkage({
            data: cityData,
            //valueKey, textKey
            format: function(data, selectedVal) {
                var formated = [];
                data.forEach(function(each) {
                    if (each.parent == selectedVal) {
                        formated.push({
                            value: each.id,
                            text: each.name
                        });
                    }
                });
                return formated;
            },
            afterRender: function($sel) {
                console.log('city rendered!', $sel);
            }
        });

        var provSel = $('#provSel').linkage({
            data: prov,
            //valueKey, textKey
            format: function(data, selectedVal) {
                var formated = [];
                data.forEach(function(each) {
                    if (each.parent == selectedVal) {
                        formated.push({
                            value: each.id,
                            text: each.name
                        });
                    }
                });
                return formated;
            },
            afterRender: function($sel) {
                console.log('prov rendered!', $sel);
            },
            next: citySel

        });

        var countrySel = $('#countrySel').linkage({
            data: country,
            //valueKey, textKey
            format: function(data) {
                var formated = [];
                data.forEach(function(each) {
                    formated.push({
                        value: each.id,
                        text: each.name
                    });
                });
                return formated;
            },
            afterRender: function($sel) {
                console.log('country rendered!', $sel);
            },
            next: provSel,
            isRoot: true
        });

        /* 异步数据 */
        var url = 'data.json';
        var citySelAysn = $('#citySelAysn').linkage({
            url: url,
            format: function(data, selectedVal) {
            	data = data.city;//获取城市
                var formated = [];
                data.forEach(function(each) {
                    if (each.parent == selectedVal) {
                        formated.push({
                            value: each.id,
                            text: each.name
                        });
                    }
                });
                return formated;
            },
            afterRender: function($sel) {
                console.log('city rendered!', $sel);
            }
        });

        var provSelAysn = $('#provSelAysn').linkage({
            url: function(){
            	return url + '?r=' + Math.random();//每次都不走缓存
            },
            initOpt: '<option value="">不限</option>',//初始化一个选项用法
            format: function(data, selectedVal) {
            	data = data.prov;//获取省份
                var formated = [];
                data.forEach(function(each) {
                    if (each.parent == selectedVal) {
                        formated.push({
                            value: each.id,
                            text: each.name
                        });
                    }
                });
                return formated;
            },
            afterRender: function($sel) {
                console.log('prov rendered!', $sel);
            },
            next: citySelAysn

        });

        var countrySelAysn = $('#countrySelAysn').linkage({
            url: url,
            format: function(data) {
            	data = data.country;//获取国家对象
                var formated = [];
                data.forEach(function(each) {
                    formated.push({
                        value: each.id,
                        text: each.name
                    });
                });
                return formated;
            },
            afterRender: function($sel) {//渲染之后的回调
                console.log('country rendered!', $sel);
            },
            next: provSelAysn,
            isRoot: true
        });

        var val = [2,4,4];
        $('#change-data-btn').click(function(){
            $('#countrySelAysn').val(val[0]).change();
            countrySelAysn.setNextVal(val[1]);
            provSelAysn.setNextVal(val[2]);
        });
    });
    </script>
</body>

</html>

注意点：

异步的要在tomcat服务器中打开

同步和异步其实没有什么太大区别，异步只是远程获取。

插件代码：http://download.csdn.net/detail/maoxunxing/8061655