JSDom加载解析XML文件——下拉列表二级联动篇

以前在项目中实现二级联动是通过单纯的JS方法，在对JS的深度了解中发现通过JSDom加载写好的XML文件也可以实现二级联动，这也不失为一种好的方法，下面就跟大家分享一下。

首先，我们来看下要呈现的效果：

 

好，我们来看下需要的一个简单的XML文件：

 

我们可以看到该XML文档有三层：

根节点：cities

子节点：province

子节点：city

Province节点拥有一个Name属性

      下面我们来看下JS的源码：

  
   
   
   
   

   
 
   
 
   
    
    
    
     1 
   
 
   
 
   
    
    
    
    window.onload 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    function
   
 
   
 
   
    
    
    
     (){

   
 
   
 
   
    
    
    
     2 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     3 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    创建微软XML解析控件对象
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     4 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     5 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     xmlDoc 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    new
   
 
   
 
   
    
    
    
     ActiveXObject(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    Microsoft.XMLDOM
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     6 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     7 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得省的选择框对象节点
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     8 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     9 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     province 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     document.getElementById(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    province
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     10 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     11 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得市的选择框对象节点
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     12 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     13 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     city 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     document.getElementById(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    city
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     14 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     15 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    设置异步关闭
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     16 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     17 
   
 
   
 
   
    
    
    
     xmlDoc.async 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    false
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    ;

   
 
   
 
   
    
    
    
     18 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     19 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    加载XML文件
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     20 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     21 
   
 
   
 
   
    
    
    
     xmlDoc.load(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    cities.xml
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     22 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     23 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得XML文件标签名为province的对象节点
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     24 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     25 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     txt 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     xmlDoc.getElementsByTagName(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    province
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     26 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     27 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    使用循环将获得的省的名称加入province的选择框中
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     28 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     29 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    for
   
 
   
 
   
    
    
    
    (
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     i
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    0
   
 
   
 
   
    
    
    
    ;i
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    txt.length;i
   
 
   
 
   
    
    
    
    ++
   
 
   
 
   
    
    
    
    ){

   
 
   
 
   
    
    
    
     30 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     31 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得province标签属性名
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     32 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     33 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     name 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     txt[i].getAttribute(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     34 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     35 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    创建option节点对象
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     36 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     37 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     p 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     document.createElement(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     38 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     39 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    将文本节点添加到option对象中
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     40 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     41 
   
 
   
 
   
    
    
    
     p.appendChild(document.createTextNode(name));

   
 
   
 
   
    
    
    
     42 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     43 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    将对象添加到省选择框的对象节点中
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     44 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     45 
   
 
   
 
   
    
    
    
     province.appendChild(p);

   
 
   
 
   
    
    
    
     46 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     47 
   
 
   
 
   
    
    
    
     }

   
 
   
 
   
    
    
    
     48 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     49 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    当province文本框中的值发生改变时触发以下事件
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     50 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     51 
   
 
   
 
   
    
    
    
     province.onchange 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    function
   
 
   
 
   
    
    
    
     (){

   
 
   
 
   
    
    
    
     52 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     53 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得省的所有选项
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     54 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     55 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     prces 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     province.options;

   
 
   
 
   
    
    
    
     56 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     57 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得选中选项
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     58 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     59 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     selected 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     prces[prces.selectedIndex];

   
 
   
 
   
    
    
    
     60 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     61 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得选中项的文本值
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     62 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     63 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     sedname 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     selected.innerHTML;

   
 
   
 
   
    
    
    
     64 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     65 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     66 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     67 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     68 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     69 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    /*
   
 
   
 
   
    
    
    
    循环添加省的子城市到city选择框
   
 
   
 
   
    
    
    
    */
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     70 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     71 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    for
   
 
   
 
   
    
    
    
    (
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     i
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    0
   
 
   
 
   
    
    
    
    ;i
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    txt.length;i
   
 
   
 
   
    
    
    
    ++
   
 
   
 
   
    
    
    
    ){

   
 
   
 
   
    
    
    
     72 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     73 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得XML文档中省的name
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     74 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     75 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     name 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     txt[i].getAttribute(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    name
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
     76 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     77 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    判断选中选项的省是否与XML文档中提取到得省的name是否相同
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     78 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     79 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    if
   
 
   
 
   
    
    
    
    (sedname
   
 
   
 
   
    
    
    
    ==
   
 
   
 
   
    
    
    
    name){

   
 
   
 
   
    
    
    
     80 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     81 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    在联动之前设置其中选项长度，为了使请选择选项始终显示所以长度设置为1
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     82 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     83 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    /*
   
 
   
 
   
    
    
    
    注意：这里只是设置了下拉选择框的长度，等同于把其中的固定下标的元素隐藏，并不等同于删除其中的元素
   
 
   
 
   
    
    
    
    */
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     84 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     85 
   
 
   
 
   
    
    
    
     city.length
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    1
   
 
   
 
   
    
    
    
    ;

   
 
   
 
   
    
    
    
     86 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     87 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得其中省的节点
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     88 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     89 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     cities 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     txt[i];

   
 
   
 
   
    
    
    
     90 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     91 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    获得省的节点的子节点、也就是省内的城市
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     92 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     93 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     cy 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     cities.childNodes;

   
 
   
 
   
    
    
    
     94 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     95 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    /*
   
 
   
 
   
    
    
    
    循环添加城市节点
   
 
   
 
   
    
    
    
    */
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     96 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     97 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    for
   
 
   
 
   
    
    
    
    (
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     j
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
    0
   
 
   
 
   
    
    
    
    ;j
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    cy.length;j
   
 
   
 
   
    
    
    
    ++
   
 
   
 
   
    
    
    
    ){

   
 
   
 
   
    
    
    
     98 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     99 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    创建option元素节点
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    100 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    101 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    var
   
 
   
 
   
    
    
    
     nopt 
   
 
   
 
   
    
    
    
    =
   
 
   
 
   
    
    
    
     document.createElement(
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    "
   
 
   
 
   
    
    
    
    );

   
 
   
 
   
    
    
    
    102 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    103 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    将获得的城市节点的文本添加到该元素节点中
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    104 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    105 
   
 
   
 
   
    
    
    
     nopt.appendChild(document.createTextNode(cy[j].childNodes[
   
 
   
 
   
    
    
    
    0
   
 
   
 
   
    
    
    
    ].nodeValue));

   
 
   
 
   
    
    
    
    106 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    107 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    //
   
 
   
 
   
    
    
    
    添加到下拉框节点中
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    108 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    109 
   
 
   
 
   
    
    
    
     city.appendChild(nopt);

   
 
   
 
   
    
    
    
    110 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    111 
   
 
   
 
   
    
    
    
     }

   
 
   
 
   
    
    
    
    112 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    113 
   
 
   
 
   
    
    
    
     }

   
 
   
 
   
    
    
    
    114 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    115 
   
 
   
 
   
    
    
    
     }

   
 
   
 
   
    
    
    
    116 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    117 
   
 
   
 
   
    
    
    
     }

   
 
   
 
   
    
    
    
    118 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    119 
   
 
   
 
   
    
    
    
    }
  

  

  
   
   
   
   

HTML源码:

  
   
   
   
   

   
 
   
 
   
    
    
    
     1 
   
 
   
 
   
    
    
    
    <!
   
 
   
 
   
    
    
    
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     2 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    html 
   
 
   
 
   
    
    
    
    xmlns
   
 
   
 
   
    
    
    
    ="http://www.w3.org/1999/xhtml"
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     3 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    head
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     4 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    meta 
   
 
   
 
   
    
    
    
    http-equiv
   
 
   
 
   
    
    
    
    ="Content-Type"
   
 
   
 
   
    
    
    
     content
   
 
   
 
   
    
    
    
    ="text/html; charset=utf-8"
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    />
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     5 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    title
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    省市联动
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    title
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     6 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    head
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     7 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     8 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    body
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
     9 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    select 
   
 
   
 
   
    
    
    
    id
   
 
   
 
   
    
    
    
    ="province"
   
 
   
 
   
    
    
    
     style
   
 
   
 
   
    
    
    
    ="width:100px; background:#CCC;"
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    10 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    --请选择省--
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    11 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    select
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    12 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    select 
   
 
   
 
   
    
    
    
    id
   
 
   
 
   
    
    
    
    ="city"
   
 
   
 
   
    
    
    
     style
   
 
   
 
   
    
    
    
    ="width:100px; background:#CCC;"
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    13 
   
 
   
 
   
    
    
    
     
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    --请选择市--
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    option
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    14 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    select
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    15 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    body
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    16 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    <
   
 
   
 
   
    
    
    
    script 
   
 
   
 
   
    
    
    
    type
   
 
   
 
   
    
    
    
    ="text/javascript"
   
 
   
 
   
    
    
    
     src
   
 
   
 
   
    
    
    
    ="city.js"
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    17 
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    18 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    script
   
 
   
 
   
    
    
    
    >
   
 
   
 
   
    
    
    
    

   
 
   
 
   
    
    
    
    19 
   
 
   
 
   
    
    
    
    
   
 
   
 
   
    
    
    
    </
   
 
   
 
   
    
    
    
    html
   
 
   
 
   
    
    
    
    >
  

  

  
   
   
   
   

注意：这段js脚本代码仅支持IE浏览器（本人使用IE9测试），还有其中的XML加载路径，我的是默认在本站也就是同一个文件夹内；

      此外，当再次点击“请选择省“这个选项时，右侧市的选择框会停留在你上一次点击的省的下属市上不会做改变，这也算一个小小的bug吧，大家见谅，有解决的请回复我。

本文版权所有，转载请注明出处。