级联下拉列表

说明：级联下拉列表其实就是一级标签发生改变时（onchenge事件），二级标签随之改变。其中最重要的时把key和value放入select下的option.

.

直接上代码，霍霍霍霍
<!doctype html>
<html>
    <head>
  
        <title>级联下拉列表</title>
        <style>
            select{                 /*元素选择器，所有的同名标签select*/
                border:1px solid blue;
                /*padding:5px 10px;         上下、左右*/
                border: 1px solid red;      /*后面的优先级高*/
                padding: 5px 10px 6px 7px;
                margin: 20px 25px;
                border-radius:25px;
            }
            .bigSel{                /*类选择器 某个元素class属性值=bigSel*/
                width:280px;
            }
            #provinces{             /*id选择器，id属性值=provinces，优先级>类选择器>元素选择器*/
                border-color:blue;
            }
        </style>
        <script>
            // $是自己定义的一个方法，用于根据id获取元素
            function $(v){
                return document.getElementById(v);
            }
			//一级
            var p = ['投资入股类','资金运用类','保险业务类','利益转移类','提供服务类'];
			//二级
            p['01'] = ['投资入股','投资该保险公司发行的优先股、债券、或其他证券'];
            p['02'] = ['未上市权益类','活期存款','不动产类','境外投资','其他金融资产','与关联方共同投资','定期存款'];
            p['03'] = ['保险业务','其他(后续赎回、赔付、还本付息、分配股息和红利、再保险摊回赔付、调整再保险手续费等交易)','保险代理业务','再保险的分出','再保险的分入','委托管理资产和业务','受托管理资产和业务'];
            p['04'] = ['出售资产','租赁资产','权利转让','担保','给予财务资助','接受财务资助','赠与','债权转移','债务转移','签订许可协议','放弃优先受让权','放弃同比例增资权','其他'];
            p['05'] = ['审计','精算','法律','资产评估','资金托管','广告','日常采购','职场装修','其他'];
            // 文档就绪函数，
            window.onload = function(){
                // 遍历一级元素
                for(var i=0; i<p.length; i++){
                    // $是自己定义的一个方法，用于根据id获取元素
                    $("one").options.add(new Option(p[i],'0'+(i+1)));
                }             
                $(one).value = "01";
                showCitys($(one).value);
                $('two').value = $('two').options[0].value;
                showAreas($('two').value);
            }           
            function showCitys(v){
                // 根据一级去拿二级的key和value
                $("two").options.length = 0;
                if(!(v<0)){
                    var citys = p[v];       // 拿到这个省份对应的所有城市
                    for(var i= 0; i<citys.length; i++){
                        $("two").options.add(new Option(citys[i],i+1));
                    }
                }              
            }
        </script>
    </head>
    <body>
       <form name="fr" action="/submit">
            <select name="one" id="one" class="bigSel" onchange="showCitys(this.value)">
                <option value="-1">-- 请选择 --</option>
            </select>
            <select name="two" id="citys" two="showAreas(this.value)">
                <option value="">-- 请选择 --</option>
            </select>
            <input type="submit" value="提交"/>
        </form>
        
    </body>
</html>
落霞与孤鹜齐飞，秋水共长天一色。。。
原文链接：https://blog.csdn.net/yls1997/article/details/107221849