标签:
由两个select ,其中一个变化,另外一个的内容也会随之变化(菜鸟...)请高手指正
下面是html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        省
        <select name="">
            <option value="0">--请选择--</option>
            <option value="1">河南</option>
            <option value="2">北京</option>    
        </select>
        市
        <select name="">
            <option value="">--请选择--</option>
        </select>
        <script type="text/javascript">
        //数据
            var arr1 = ["郑州","洛阳","开封","新乡"];
            var arr2 = ["东京","洛阳","开封","新乡"]
            //获取元素
            var select1 =document.querySelector("select");
            var select2 = select1.nextElementSibling;
            //关联方法
            select1.onchange =function(){
                //清空操作
                for (var i=1;i<select2.children.length; i++) {
                     var opt1 =select2.children[i];
                    select2.removeChild(opt1)
                    i--;
                }
                
                //如果是河南
                if (select1.value == "1") {
                    for (var i=0; i<arr1.length; i++) {
                        //循环一次创建option
                        var opt = document.createElement("option")
                        opt.innerHTML= arr1[i];
                        //插入到select2中
                        select2.appendChild(opt);
                    }
                }
                if (select1.value == "2") {
                    for (var i=0; i<arr2.length; i++) {
                        var opt = document.createElement("option");
                        opt.innerHTML= arr2[i];
                        select2.appendChild(opt);
                    }        
                }
            }
        </script>
    </body>
</html>
标签:
原文地址:http://www.cnblogs.com/lyan123/p/5655931.html