原生js实现简单的省市联动菜单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   所在地
   <select name="" id="provinceId" onchange="selectCity(this.value)">
    <option value="">请选择省</option>
       <option value="0">北京</option>
       <option value="1">吉林</option>
       <option value="2">江苏</option>
   </select>
   <select  id="cityId">
    <option value="">请选择市</option>
</select>
</div>
    <script>
        function selectCity(value){
            var citys = [ ["海淀","昌平","朝阳"],["长春","吉林","延边"],["苏州","徐州","南京"]];
        
       var city = citys[value];
       alert(city);
       var str ="<option>请选择市</option>";
        cityID.removeChild(option);
        cityID.innerHTML = str;
       var cityID = document.getElementById("cityId");
       for(var i = 0;i<city.length;i++)
       {
           str+="<option>"+city[i]+"</option>";
       }
       cityID.innerHTML = str;
    }
    </script>
</body>
</html>

 

 

posted @ 2022-04-01 19:56  权。  阅读(78)  评论(0)    收藏  举报