DOM

来源：互联网发布：软件风险管理报告编辑：程序博客网时间：2024/05/23 13:32

<!DOCTYPE html>
<html>
<head>
    <title>二级联动.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<script type="text/javascript">
//json对象相当于java中的map
/* var json = {"name":"tom","age":18};
   for(var key in json){
   alert(json[key])
   } */
   var json = {"河北省":["石家庄","廊坊","沧州"],
     "山西省":["太原","大同","运城"],
     "黑龙江省":["哈尔滨","齐齐哈尔","佳木斯"]};

        function fun1(){
        //1.获得省的select对象
        var province = document.getElementById("province");
        //2.遍历json的所有键

        for(var key in json){
        //创建一个option
        var option = document.createElement("option");
          option.innerHTML = key;
         // 将option加入到select中
          province.appendChild(option);
        }
        }
        function fun2(){
        //获得市的select对象
        var city = document.getElementById("city");
        //清空市级下拉选项的数据
        city.length = 1;
        //获得用户选择的省
        if(!province.selectedIndex){   //selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
        //选择提示选项
        return ;
        }
        var options = province.options;     //options 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
        var provinceName = options[province.selectedIndex].innerHTML;   //innerHTML

        //从json中根据省获得省以下的市数据
        var cities = json[provinceName];
        //遍历市级的数组
        for(var i = 0; i<cities.length;i++){
        var cityName = cities[i];

        //创建市的option
        var option = document.createElement("option");
        option.innerHTML = cityName;
        //将option添加到select中
        city.appendChild(option);
        }
     }

</script>

</head>

<body onload="fun1()">    //页面加载之后立即执行fun1()
     <select id="province" onchange="fun2();">  //onchange当改变选择时调用的事件句柄。
     <option>--请选择省--</option>

     </select>
     <select id="city">
     <option>--请选择市--</option>

     </select>
</body>
</html>

阅读全文

0 0