📄 select.html
字号:
<html>
<head>
<script language="javascript">
var arrBeijing = ["崇文","海淀","宣武","昌平","朝阳"];
var arrShanghai = ["虹桥","徐汇","浦东","黄浦江","城隍庙"];
var arrHebei = ["石家庄", "廊坊", "保定", "沧州", "邯郸","张家口","承德"];
function getArr(proValue){
if(proValue == "beijing"){
return arrBeijing;
}else if(proValue == "shanghai"){
return arrShanghai;
}else if(proValue == "hebei"){
return arrHebei;
}
}
function changeCity(){
var selP = document.getElementById("selP");
//options --> 返回select对象中所有的option对象
var opts = selP.options;
//selectedIndex --> 返回当前选中option的下标
var optIndex = opts.selectedIndex;
var opt = opts[optIndex];
var optValue = opt.value;
//获得城市列表
var arr = getArr(optValue);
//清空城市列表
var selC = document.getElementById("selC");
selC.length = 0;
//添加城市列表
for(var i=0; i<arr.length; i++){
//扩充城市列表长度
selC.length += 1;
//添加一个option
var newOp = new Option(arr[i],arr[i]);
selC.options[i] = newOp;
}
}
</script>
</head>
<body>
省份:
<select id="selP" onchange="changeCity()">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hebei">河北</option>
</select>
城市(区):
<select id="selC">
<option>请选择</option>
</select>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -