三级联动---(省市区)

首先建立三个下拉列表框

<select id="sheng"></select>
        <select id="shi"></select>
        <select id="qu"></select>

分别获取他们的对象

<script>
            var sheng=document.getElementById("sheng");
            var shi=document.getElementById("shi");
            var qu=document.getElementById("qu");

var sheng_str="";
            for(i=0;i<data.length;i++){
            sheng_str+="<option>"+data[i].name+"</option>"
            }
            sheng.innerHTML=sheng_str;

  var shi_index;
            sheng.onchange=function(){
                qu.innerHTML="";
                shi_index=sheng.selectedIndex;
                var shi_str="";
                var shi_data=data[shi_index].children
                for(i=0;i<shi_data.length;i++){
                    shi_str+="<option>"+shi_data[i].name+"</option>"
                }
                shi.innerHTML=shi_str;
            }

shi.onchange=function(){
                var qu_index=shi.selectedIndex;
                var qu_str="";
                var qu_data=data[shi_index].children[qu_index].children;
                for(i=0;i<qu_data.length;i++){
                    qu_str+="<option>"+qu_data[i].name+"</option>"
                }
                qu.innerHTML=qu_str;
            }
</script>

猜你喜欢

转载自www.cnblogs.com/xuhanghang/p/10126007.html