利用dom技术将省份和城市列表项逐一输出,并且假设设置的有默认省份和城市,能直接选中。
2016-06-29_195859

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市列表</title>
<script src="CitysData.js" ></script>

</head>
<body>
<script>
function cc(sf, cs) {
  document.write('<select onchange="select(this)" id="provinces">');
  document.write('<option value="">--选择省份--</option>');
  var a = 0;
  for (var i = 0; i < arrCity.length; i++) {
    if (typeof(sf) != "undefined") {
      if (arrCity[i]["name"] == sf) {
        var sel = "selected";
        a = i;
      } else {
        var sel = "";
      }

    }

    document.write('<option ' + sel + ' value="' + arrCity[i]["name"] + '">' + arrCity[i]["name"] + '</option>');
  }
  document.write("</select>");

  document.write('<select id="citys" name="+cname+">');
  document.write('<option value="">--选择城市--</option>');
  document.write("</select>");
  if (a > 0) {
    select(document.getElementById("provinces"), cs, a);
  }
}

function select(proobj, cs, a) {

  if (typeof(a) != "undefined") {
    var index = a;
  } else {
    var index = proobj.selectedIndex - 1;
  }

  var citys = document.getElementById("citys");
  var sub = arrCity[index]["sub"];
  citys.innerHTML = "";
  for (var i = 0; i < sub.length; i++) {

    if (sub[i]["name"] == cs) {
      var sel = "selected";
    } else {
      var sel = "";
    }
    var option = document.createElement("option");
    var text = sub[i]["name"];
    //console.log(text);
    option.value = text;
    option.selected = sel;
    option.innerHTML = text;
    citys.appendChild(option);
  }
}

//用户默认的省份是湖北,城市是武汉
cc("湖北", "武汉");

</script>

</body>
</html>

里面的函数“cc”是显示省份,函数“select”是根据用户选定的省份,响应的显示该省管辖的城市。
上面引用的CitysData.js文件里面包含的中国所有的省份名和城市名,用的是百度的数据,地址是城市数据地址,可能部分需要更新。

分类: 吐槽

发表评论

电子邮件地址不会被公开。 必填项已用*标注