前端基础 - JavaScript之省市联动简单案例-CFANZ编程社区

JavaScript之省市联动案例

效果图：

前端基础 - JavaScript之省市联动简单案例_i++
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script>
    // 定义二维数组,存储城市信息
    var cities = new Array(4);
    cities[0] = new Array("市辖区");
    cities[1] = new Array("长春市","吉林市","松原市","延边市");
    cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
    cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
    cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

    //给省的select注册onchange事件
    window.onload = init;
    function init(){
      //获取省select 绑定 onchange
      var provinceSelect = document.getElementById("province");
      provinceSelect.onchange = change;
    }
    
    function change(){
      //清空市select中的option
      document.getElementById("city").innerHTML = "<option>----请-选-择-市----</option>";
      //获取选中了哪一个省 this.value
      //发现 省的value值 和 二维数组中的下标正好相等
      var cs = cities[this.value];
      //遍历数组,取出每一个市的名称
      for(var i = 0;i < cs.length;i++){
        var cname = cs[i];
        //取出一个市.我们需要创建一个option
        var op = document.createElement("option");//<option></option>
        var textNode = document.createTextNode(cname);
        //把文本节点 添加到 op中
        op.appendChild(textNode);//<option>cname</option>
        //把每次创建的option添加到 市这个select中
        document.getElementById("city").appendChild(op);
      }
      
    }
    
  </script>
  <body>
    <select id="province" style="width:150px">
      <option value="">----请-选-择-省----</option>
      <option value="0">北京</option>
      <option value="1">吉林省</option>
      <option value="2">山东省</option>
      <option value="3">河北省</option>
      <option value="4">江苏省</option>
    </select>
    <select id="city" style="width:150px">
      <option value="">----请-选-择-市----</option>
      
    </select>
    
  </body>
</html>