实现下拉菜单对于地址的选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select>
<option value="-1">--请选择--</option>
</select>
<select>
<option value="-1">--请选择--</option>
</select>
<script type="text/javascript">
var pros = ['河北省','辽宁省','北京市'];
var cities = [['秦皇岛','石家庄','唐山','保定'],['沈阳','大连','鞍山'],['海淀区','朝阳区','东城区','房山','密云']];
var sels = document.querySelectorAll('select');
for (var i = 0; i < pros.length; i++) {
var op = document.createElement('option');
op.innerHTML = pros[i];
op.value = i;
sels[0].appendChild(op);
}
sels[0].onchange = function(){
fn(sels[1],cities[this.value]);
}
function fn(s,arr){
s.innerHTML = '<option value="-1">--请选择--</option>';
for (var i = 0; i < arr.length; i++) {
var op = document.createElement('option');
op.innerHTML = arr[i];
op.value = i;
s.appendChild(op);
}
}
</script>
</body>
</html>
用js实现一个下拉列表小案例
猜你喜欢
转载自blog.csdn.net/stay_hungry_stay/article/details/81193159
今日推荐
周排行