实现二级联动的源代码

最新推荐文章于 2021-08-05 19:45:40 发布

原创最新推荐文章于 2021-08-05 19:45:40 发布 · 840 阅读

0 ·

CC 4.0 BY-SA版权

这是一个使用JavaScript实现二级联动的示例代码，通过遍历省份数组，动态生成省份选择框，并在省份选择变化时更新对应的市区选项。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js_tag.html</title>

    var provinces = [ {
     id : '1',
     name : '北京',
     city : [ '海淀区', '朝阳区', '大兴区' ]
    }, {
     id : '2',
     name : '天津',
     city : [ '北辰区', '和平区', '虹桥区' ]
    }, {
     id : '3',
     name : '上海',
     city : [ 'A区', 'B区', 'C区' ]
    }, {
     id : '4',
     name : '重庆',
     city : [ 'AA区', 'BB区', 'CC区' ]
    } ];

//当页面已加载就把省份显示的操作

    var domProvinces = document.getElementById("province");
    //遍历省份集合
    for ( var i = 0; i < provinces.length; i++) {
     //获取具体省份对象
     var pro = provinces[i];
     //创建option标签
     var option = document.createElement("option"); //创建一个元素节点
     //为option标签添加value属性
     option.setAttribute("value", pro.id); //为创建的元素节点添加属性
     //创建一个文本节点
     var textNode = document.createTextNode(pro.name); //创建一个文本节点
     //添加到option节点中
     option.appendChild(textNode); //为创建的元素节点添加子节点
     //添加到id="province"的selete标签中
     domProvinces.appendChild(option); //把创建的元素节点添加到指定的节点中
    }

//当省份发生改变的时候,就把相应的市区显示给客户
var domcity = document.getElementById("city");

domProvinces.onchange = function() {

     //清除市区的操作
     /*var cNodes = domcity.childNodes; //获取子节点

     for(var k=0;k<cNodes.length; ){
      domcity.removeChild(cNodes[0]); //始终的移除的是第一个
     }*/

//清除市区的操作
domcity.length = 1;

     //添加
     for ( var i = 0; i < provinces.length; i++) {
      //获取具体省份对象
      var dpro = provinces[i];
      if (this.value == dpro.id) {
       var city = dpro.city;

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

        //创建option标签
        var doption = document.createElement("option"); //创建一个元素节点
        //创建一个文本节点
        var dtextNode = document
          .createTextNode(city[j]); //创建一个文本节点
        //添加到option节点中
        doption.appendChild(dtextNode);
        //把创建的option节点添加到id=“city”的select中
        domcity.appendChild(doption);
       }
       break;
      } else {
       continue;
      }
     }
    }

}
</script>

</head>

<body>

  <br />
  <select id="province">
   <option value="-1">
    请选择省份
   </option>

  </select>
  <select id="city">
  <option value="-1">
    请选择市区
   </option>
  </select>

</body>
</html>