通过JAVASCRIPT及DOM实现对国家省份及城市级联查询的方法-优快云博客

本文介绍了一种使用DOM操作实现国家-省份-城市级联下拉框的方法。通过生成并解析XML文件，动态更新下拉框选项，简化了多级数据的选择流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间做一个项目，需要动态的从后台数据里面里面提取相应国家、省份及城市的信息，实现的过程就是通过下拉菜单先选择一个国家，然后在另一个下拉框里面是这个国家的省份，再通过选择的省份填充另外一个城市的下拉框，其实通过级联查询的方式完全可以实现，或者一次性通过数组读取国家省份及城市的信息，然后填充这几个下拉框，觉得这样也不方便，想来想去何不用DOM的方式来实现了，思路如下：

第一，通过后台程序生成一个XML文件，节点分别为：国家——》省——》城市

第二，通过前台的的DOM提取这个XML文件

第三，通过脚本加载这个XML文件到相应的下拉框，首先加载国家，当选择某个国家的时候通过XML的查询语句再填充相应的省，依次类推，填充省下的城市，实现级联查询，省去了不少麻烦：）

生成XML文件的方式在这里就不提了，只把相应读XML文件的脚本贴出来，便于自己记忆：）

<html>
<head>
    <title>city.htm</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; GBK">
    <script language="javascript">
    var xmlDoc;
    function init(initProvince, initCity) {//参数1：初始化时的省；参数2：初始化时的城市
    var sltOne = document.getElementById("classId");
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.load("cityXml.jsp");
  if (xmlDoc.parseError.errorCode != 0) {
     var myErr = xmlDoc.parseError;
     alert("You have error " + myErr.reason);
  } else {
    //alert(xmlDoc.xml);
    var oNodeList;
    var sonNode;
    var oNode;
    objNodeList = xmlDoc.getElementsByTagName("province");
   for (var i=0; i<objNodeList.length; i++) {
    oNode = objNodeList.item(i)
    var opt = document.createElement("OPTION");
    sltOne.add(opt);
    opt.innerText = oNode.getAttribute("name");
    opt.value = oNode.getAttribute("id");
    if(opt.innerValue == initProvince)
     opt.selected = true;
   }
   if(initCity.length > 0 && initProvince.length > 0)
    getCityByProvince(initProvince, initCity);
  }
}

function getCityByProvince(initProvince, initCity) {
  var sltTwo = document.getElementById("NclassIdt");
  sltTwo.length = 0;
  var curNode;//当前节点
  var cNode;//节点
  var xpath;//路径
  var name;//区域名称
  name = initProvince;//event.srcElement.value;
  xpath = "/catalog/province[@name='" + name + "']/city"
  //alert(xpath);
  cNode = xmlDoc.selectNodes(xpath);
  //alert(cNode.length);
  if(cNode.length == 0) {
   var opt = document.createElement("OPTION");
   sltTwo.add(opt);
   opt.value = "null";
   opt.innerText = "选择城市";
  }
  for(var i=0;i<cNode.length;i++) {
   curNode = cNode.item(i);
   var opt = document.createElement("OPTION");
   sltTwo.add(opt);
   opt.value = curNode.getAttribute("name");
   opt.innerText = curNode.getAttribute("name");
   if(opt.value == initCity)
    opt.selected = true;
  }

}
</script>

</head>

<body onload="init('','')">
    This is my HTML page. <br>
    <select id=sltOne onchange="getVenuesByLocation(this.value)">
    <option value="null">选择省
    </select>
    <select id=sltTwo>
    <option value="null">选择城市
    </select>
</body>
</html>