js+xml 省市级联以及修改默认选中

本文介绍了一种使用JavaScript从XML文件中读取数据,并将这些数据填充到HTML页面上的下拉列表中,同时实现了根据省份选择自动加载对应的城市列表的功能。

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

需要默认选中时,定义一个变量 var cityId=城市id

path为工程的跟目录


下面是js代码
function readxml() {
 
   var XmlDoc =null;
    if(window.ActiveXObject) {
      XmlDoc = newActiveXObject("Microsoft.XMLDOM");
      XmlDoc.async = false;
      XmlDoc.load(path +"/web/common/regions.xml");
      browse = "ie";
    } else if(document.implementation
         &&document.implementation.createDocument) {
      xmlDoc =document.implementation.createDocument('', '', null);
      xmlDoc.load("regions.xml");
      browse = "ff";
    } else{
      alert('未做与该浏览器的兼容!');
    }

    var root =XmlDoc.documentElement;

    //获取根节点下面的省节点
    varprovinces = root.childNodes;

    var province= document.getElementByIdx_x_x("province");
    var cities =document.getElementByIdx_x_x("regId");
    for ( var i= 0; i < provinces.length; i++) {
      // 获取省节点的name属性的值
      var name =provinces[i].getAttribute("name");
      // 创建一个option
      var opt =document_createElement_x_x("option");
      // 为option添加文本
      opt.a(document_createTextNode(name));
      // 添加到父节点中
      if(cityId!=null&&cityId!=""){
      var citys=provinces[i].childNodes;
      for(varj=0;j<citys.length;j++){
         if(citys[j].getAttribute("id")==cityId){
            opt.selected="selected";
            for ( var j = 0; j < citys.length;j++) {
               // 创建一个option
               var opt1 =document_createElement_x_x("option");
               opt1.value = citys[j].getAttribute("id");
               // 为option添加文本
               opt1.a(document_createTextNode(citys[j]
                     .getAttribute("name")));
               // 添加到父节点中
               if(citys[j].getAttribute("id")==cityId){
               opt1.selected="selected";
               }
               cities.a(opt1);
            }
         }
      }
      }
      province.a(opt);
    }
   province.onchange = function() {
      var pce =document.getElementByIdx_x_x("province");
      var opts = pce.options;
      var opt1 = opts[pce.selectedIndex];
      var name = opt1.innerText;
      for ( var i = 0; i <provinces.length; i++) {
         // 获取省节点的name属性的值
         var name1 =provinces[i].getAttribute("name");
         if (name == name1) {
            cities.length = 1;// 每次改变的时候清空
            var pros = provinces[i];
            var citys = pros.childNodes;
            for ( var j = 0; j < citys.length;j++) {
               // 创建一个option
               var opt1 =document_createElement_x_x("option");
               opt1.value = citys[j].getAttribute("id");
               // 为option添加文本
               opt1.a(document_createTextNode(citys[j]
                     .getAttribute("name")));
               // 添加到父节点中
               cities.a(opt1);
            }
         }
      }
    }
}


下面是xml结构
<?xml version="1.0"encoding="utf-8"?>
<regions>
  <provincename="湖北">
   <city id="1" name="武汉" isOpen="1"/>
   <city id="2" name="黄冈" isOpen="1"/>
   <city id="19" name="襄樊" isOpen="1"/>
   <city id="22" name="鄂州" isOpen="0"/>
   <city id="24" name="黄石" isOpen="1"/>
  </province>
  <provincename="重庆">
   <city id="23" name="重庆" isOpen="0"/>
  </province>
</regions>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值