道招

制作省份城市选择列表

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

制作省份城市选择列表

利用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文件里面包含的中国所有的省份名和城市名,用的是百度的数据,地址是城市数据地址,可能部分需要更新。
更新时间:
上一篇:PHP版Google People API的坑下一篇:《 AngularJS深度剖析与最佳实践》安装front-jet失败

相关文章

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了