您的位置：首页 > 其它

城市选择下拉菜单三级联动

2016-06-14 17:44 267 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市三级联动</title>
<link rel="stylesheet" type="text/css" href="city.css">
</head>
<body>
<form method="post" action="">
<select id="pro">
<option>--请选择省--</option>
</select>
<select id="city" disabled>
<option>--请选择市--</option>
</select>
<select id="district" disabled>
<option>--请选择区(县)--</option>
</select>
</form>
</body>
<script type="text/javascript" src="city.js"></script>
</html>
JavaScript
var pro = document.getElementById("pro");var city = document.getElementById("city");var district = document.getElementById("district");function CityItem() {this.items = {};this.add = function(key, val) {this.items[key] = val;}}var cityItem = new CityItem();cityItem.add(0, ["湖北", "陕西", "贵州"]);cityItem.add(1, ["武汉", "襄阳", "宜昌"]);cityItem.add(2, ["西安", "咸阳", "榆林"]);cityItem.add(3, ["贵阳", "黔南", "黔东南"]);cityItem.add("1_1", ["江岸", "汉阳", "洪山"]);cityItem.add("1_2", ["襄城", "樊城", "枣阳"]);cityItem.add("1_3", ["夷陵", "西陵", "秭归"]);cityItem.add("2_1", ["碑林", "雁塔", "莲湖"]);cityItem.add("2_2", ["秦都", "兴平", "武功"]);cityItem.add("2_3", ["榆阳", "神木", "府谷"]);cityItem.add("3_1", ["云岩", "南明", "白云"]);cityItem.add("3_2", ["都匀", "平塘", "翁安"]);cityItem.add("3_3", ["凯里", "榕江", "三穗"]);for(var i in cityItem.items[0]) {var opt = document.createElement("option");opt.innerText = cityItem.items[0][i];pro.appendChild(opt);}pro.onchange = function() {//如果选择"--请选择省--" 选择市的下拉列表不能选择 否则可以选择city.disabled = (this.selectedIndex < 1);//选择区县的下拉列表不能选择district.disabled = true;//清空选择市和选择区县的下拉列表city.innerHTML = "<option>--请选择市--</option>";district.innerHTML = "<option>--请选择区(县)--</option>";var key = this.selectedIndex;for(var i in cityItem.items[key]) {var opt = document.createElement("option");opt.innerText = cityItem.items[key][i];city.appendChild(opt);}}city.onchange = function() {//如果选择"--请选择市--" 选择区县的下拉列表不能选择 否则可以选择district.disabled = (this.selectedIndex < 1);//清空选择区县的下拉列表district.innerHTML = "<option>--请选择区(县)--</option>";var key = pro.selectedIndex + "_" + this.selectedIndex;for(var i in cityItem.items[key]) {var opt = document.createElement("option");opt.innerText = cityItem.items[key][i];district.appendChild(opt);}}
CSS
select{outline: none;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航