选择省份时,自动显示对应省份的城市
在很多网页中,都会有让用户选择城市的选项,那么,就需要我们用js来实现,当用户选择了省份,自动选择对应省份的城市。
<head> | |
<title></title> | |
<meta http-equiv="content" content="text/html" charset="utf-8"/> | |
<script type="text/javascript"> | |
var citys =[ ]; // 定义一个变量来保存省份和城市 | |
citys["四川"]=["成都","绵阳"]; | |
citys["湖南"]=["岳阳","长沙"]; | |
citys["广东"]=["深圳","广州"]; | |
var selects; | |
window.onload=function( ){ | |
selects = document.forms[0].elements; // 先找到第一个form对象 | |
for(var a in citys){ | |
selects[0].add(new Option(a,a),null); | |
} | |
fun() | |
} | |
function fun(){ | |
selects[1].length=0; | |
var option=selects[0].options[selects[0].selectedIndex]; | |
var city=citys[option.text]; | |
for(var i=0;i<city.length;i++){ | |
selects[1].add(new Option(city[i],city[i]),null); | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<form> | |
<select onclick="fun()"></select> // 定义一个各省份的选择框 | |
<select></select> //定义一个对应省份所在市的选择框 | |
</form> | |
</body> | |
</html> |
首先用js实现当用户点击第一个的时候,对应的选择框进行城市的跳转,并清除之前选择的城市。
学习js重要的是在坚持,虽然,开始接触的时候,都觉得挺难的,但要理解实现的功能和每段代码所要实现的功能。