DOM之select联动效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省份:</option>
</select>
<select id="city">
  <option>请选择城市:</option>
</select>
<script>
  data = {"北京": ["朝阳区", "海淀区","东城区","西城区","丰台区","昌平区","通州区"], 
          "河北": ["石家庄", "保定市","唐山市","衡水市","秦皇岛市","涿州市"], 
          "山东": ["济南市","青岛市","威海市", "烟台市"]};
  var province = document.getElementById("province");
  var city = document.getElementById("city");
  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    province.appendChild(optionP);
  };
  province.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    city.innerHTML = "";
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      city.appendChild(option_city);
    };
  };
</script>
</body>
</html>
上一篇:ES elasticsearch利用url查询


下一篇:Python函数