联动

来源：互联网发布：硕士网络教育编辑：程序博客网时间：2024/04/28 22:54
<!doctype html><html><head><meta charset="utf-8"/><title>联动</title></head><body>省:<select id="province"onchange="change();"><option value="">请选择</option><option value="0">浙江省</option><option value="1">河北省</option><option value="2">江苏省</option></select>市:<select id="city"><option>请选择</option></select><script>//加载城市数据(模拟)function load_city() {return [["杭州","宁波","温州"],["保定","廊坊","唐山"],["南京","无锡","苏州"]];}//自动加载var cities = load_city();//重置城市function change() {//1.获取省份序号(value值)var s1 = document.getElementById("province");var index = s1.value;//2.获取该省份对应的城市var pcities = cities[index];//3.删除城市下拉选内原有的城市optionvar s2 = document.getElementById("city");//var options = s2.children;//注意：从后往前删//for(var i=options.length-1;i;i--) {//options[i].remove();//}s2.innerHTML = "<option>请选择</option>";//4.将获取到的城市添加到此下拉选内if(pcities) {for(var i=0;i<pcities.length;i++) {var opt = document.createElement("option");opt.innerHTML = pcities[i];s2.appendChild(opt);}}}</script></body></html>
0 0