原生JS做列表的二级联动

2017-04-25 11:00 阅读 55 次 原生JS做列表的二级联动已关闭评论

今天,给大家介绍下JS做列表二级联动,方法有很多,这里介绍的是用数组动态的方式添加,如果有兴趣,你可以试试AJAX的方法呢。当然这个就要涉及到去拿数据了。这里不做过多的介绍,本文的数据都是在JS中添加的数据。

布局:

<table>
    <tr>
        <td>地 区</td>
        <td>
            <select id="province">
                <option>--请选择--</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>城 市</td>
        <td>
            <select name="" id="city" class="city">
                <option>--请选择城市--</option>
            </select>
        </td>
    </tr>
</table>
采用简单的table做下拉列表
JS:
window.onload = function () {
    var province = document.getElementById('province')
    var city = document.getElementById('city')
    var _province = ['北京', '上海', '四川', '江西']
    var beijing = ['东城区', '西城区']
    var shanghai = ['浦东区', '浦西区']
    var sichuan = ['成都', '绵阳']
    var jiangxi = ['南昌', '九江']
    //循环往province添加子节点
    for (var i = 0; i < _province.length; i++) {
        var kk = document.createElement('option')
        kk.innerHTML = _province[i];
        province.appendChild(kk)
    }
    //事件
    province.onchange = function () {
        var name = province.value;
        switch (name) {
            case '北京':
                addCity(beijing);
                break;
            case '上海':
                addCity(shanghai);
                break;
            case '四川':
                addCity(sichuan);
                break;
            case '江西':
                addCity(jiangxi);
                break;
            default :
                city.innerHTML = ''
                var kk = document.createElement('option')
                kk.innerHTML = '--请选择目标地址的城市--';
                city.appendChild(kk);
                break;
        }
    }
    //添加函数
    function addCity(cities) {
        city.innerHTML = '';
        var kk = document.createElement('option')
        kk.innerHTML = cities[0];//默认把第一个列表值所谓选中项
        city.appendChild(kk);
        //循环添加所有列表项
        for (var i = 1; i < cities.length; i++) {
            var _kk = document.createElement('option')
            _kk.innerHTML = cities[i];
            city.appendChild(_kk)
        }
    }
}//结束
注:原生的JS可能有点麻烦,用jQuery的方式更加简单,还是那句话,能用JS做的少用jQuery,
为什么这样说,个人看法:jQuery省去了逻辑思考的过程,这也是JQuery的宗旨
让开发者快速实现效果。但是这种方式,在我看来会让人变的懒起来,除非项目需要jQuery
,或者在用一些框架需要jQuery的时候才用例如:Bootstrap
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!技术交流群:571218744(群主不定时分享教程哦!)
转载请注明:原生JS做列表的二级联动 | 第九个码农博客
做博客不容易,各位看官,看完麻烦花一秒钟点击下广告,谢谢各位了!

评论已关闭!