当前位置: 代码迷 >> JavaScript >> js+xml生成级联上拉框
  详细解决方案

js+xml生成级联上拉框

热度:88   发布时间:2012-06-30 17:20:12.0
js+xml生成级联下拉框
HTML代码:

1.<div>  
2.        <select id="father_name" onchange="ShowCity(this)">  
3.            <option value="" selected="selected" >--请选择省份--</< span>option>  
1.            <option value="江苏">江苏</< span>option>  
1.            <option value="浙江">浙江</< span>option>  
1.        </< span>select>  
1.          
2.        <select id="son_name">  
3.            <option>--请选择城市--</< span>option>  
1.        </< span>select>  
1.    </< span>div>  
XML文件:

1.<country>  
2.  <province attr="江苏">  
3.    <city>徐州</< span>city>  
1.    <city>南京</< span>city>  
1.  </< span>province>  
1.  <province attr="浙江">  
2.    <city>杭州</< span>city>  
1.    <city>湖州</< span>city>  
1.  </< span>province>     
1.</< span>country>  
js:

1.function ShowCity(province)   
2.    {   
3.        //清空下拉框的值   
4.        document.getElementByIdx("son_name").length=0;   
5.        document.getElementByIdx("son_name").options[0] = new Option("--请选择城市--","");   
6.// 或者循环清空   
1.//        for(var i = document.getElementByIdx("son_name").length - 1; i > 0; i--) {   
1.//            document.getElementByIdx("son_name").remove(document.getElementByIdx("son_name").options[i]);   
1.//        }   
1.        //得到选中的省份   
2.        var selectprovince = province.options[province.selectedIndex].value;     
3.          
4.        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
5.        xmlDoc.async = false;   
6.        xmlDoc.load("XMLFile.XML");   
7.          
8.        //得到xml中的所有省份   
9.        var provincexml =xmlDoc.documentElement.childNodes;   
10.                  
11.        //循环判断哪个是你选中的   
12.        for(i=0;i
1.        {   
2.            if(provincexml[i].attributes[0].value == selectprovince)   
3.            {   
4.                //给下拉框循环添加市   
5.                for(j = 0;j < provincexml[i].childNodes.length; j++)   
6.                {   
7.                    var city = provincexml[i].childNodes[j].text;   
8.  
9.                    document.getElementByIdx("son_name").options[document.getElementByIdx("son_name").length] = new Option(city,city);   
10.                }   
11.                break;   
12.            }   
13.        }   
14.    }   
  相关解决方案