三级联动(省，市，县)

今天没事干复习一下之前做的东西，突然想到做个三级联动的列表，我个人觉得做这个主要练习数组的运用,

做这个时只要脑子里有顺序就不会太麻烦，在点击上一个的时候自己要知道即将执行哪个函数，数组将会怎样进行查找，通过捋顺自己的思路，你就会觉得好简单，只不过是循环罢。

以下是举的一个小例子的源代码（随便写的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>城市查询</title>

</head>

<body>
<select name="province" ;
          var P_value=pro.value;
          var length=cityArr.length;
          city.length = 1;
          for(var i=0;i<length;i++){
              if(P_value==cityArr[i][0]){
                  for(var j=1;j<cityArr[i].length;j++){
                      var pre=document.createElement('option');
                      pre.text=cityArr[i][j][0];
                      city.options.add(pre);
                  }
              }
          }
      }
//县城的加载
function getcounty(city,county,cityArr){
    var P_value=city.value;
    var length=cityArr.length;
    county.length = 1;
    for(var i=0;i<length;i++){
        for(var a=1;a<cityArr[i].length;a++) {
            if (P_value == cityArr[i][a][0]) {
                for (var j = 1; j < cityArr[i][a].length; j++) {
                    var pre = document.createElement('option');
                    pre.text = cityArr[i][a][j];
                    county.options.add(pre);
                }
            }
        }
    }
}
//  当鼠标点击省份时执行的方法
      province.onchange = function() {
          getcity(province,city,cityArr);
      }
//  当鼠标点击城市时执行的方法
city.onchange = function() {
   getcounty(city,xiancheng,cityArr);
}
</script>
</body>
</html>

做这个时只要脑子里有顺序就不会太麻烦，在点击上一个的时候自己要知道即将执行哪个函数，数组将会怎样进行查找，通过捋顺自己的思路，你就会觉得好简单，只不过是循环罢

写的有点麻烦，不过你可以再简化一点，在循环中可以适当的进行修改以增加代码的运行效率

三级联动(省，市，县)

相关推荐