原生js实现二级联动

最新推荐文章于 2021-06-16 01:15:40 发布

weixin_30565327

最新推荐文章于 2021-06-16 01:15:40 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ar13/p/8000707.html

<!DOCTYPE html>

表单联动

省份

        </select>

    <h2>城市</h2>
        <select name="" id="city" multiple>

        </select>   
    
    <script>
            var x = [
                    [
                        ['0','1']
                    ]
            ]
            console.log(x)
        function dataElemnt(){   
            this.province = document.getElementById('province');
            this.city = document.getElementById('city');
            this.region = document.getElementById('region');
            // 数据保存 ： 第一项 是省
            this.data = [ 
                            ['江西省','南昌市','宜春市','赣州市','吉安市','九江市','上饶市','抚州市','新余市'],
                            ['安徽省','合肥市','芜湖市','淮南市','马鞍山市'], 
                            ['江苏省','南京市','无锡市','无锡市','常州市','南通市']
                        ]
            }


        var object = new dataElemnt();
        
        // 初始化数据
        function city_data(){
            var data = object.data;
            // 初始化数据 
            for(var i=0; i<data.length; i++){
                // 创建默认省份
                var option = document.createElement('option');
                option.setAttribute('value','shen')
                var option_text = document.createTextNode( data[i][0] )
                option.appendChild( option_text )
                object.province.appendChild(option);
            }

        }

        // 点击 省 的时候
        function on_pro(){
            var pro = object.province;// select
            pro.onchange=function(){
                var index = pro.selectedIndex;  // 当前选中的索引值
                // console.log( index )
                var shen = pro.options[ index ].text;  // 选中的元素的值
                showCity(shen)
            }
            

        }

        // 显示数据
        function showCity(shen){
            var city = object.city;
            var data = object.data;
            for(var i=0; i<data.length; i++){
                if( shen == data[i][0]){

                    // 数据会叠加，清空数据
                    city.innerHTML ='';
                    for( var j=1; j< data[i].length; j++){
                        var option = document.createElement('option');
                        var option_text = document.createTextNode( data[i][j] );
                        option.appendChild( option_text )
                        city.appendChild( option );

                    }
                }
            }
        }

        // 加载执行
    window.onload=function(){
            city_data();
            on_pro();
            // 默认是江西省
            showCity('江西省');
            console.log( object.data)
    }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/ar13/p/8000707.html