js的DOM对象的应用--省市联动

来源：互联网发布：局域网公告软件编辑：程序博客网时间：2024/06/06 10:39

1.使用js写出省市联动：

createElement()

getElementById()

getElementsTagName()

appendChild()

removeChild()

parentNode

childNodes

setAttribute()

innerHTML

innerTEXT

2.代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">//window.onload = province;//当选择框获得焦点，就触发事件function province(select) {//如果选择框有值就不再加载if(select.value != "请选择"){return ;}var pname = ["北京","上海","广东"];var selectEle = document.getElementById("province");selectEle.innerHTML="<option>请选择</option>";//遍历省，并添加节点for(x in pname){var option = document.createElement("option");option.setAttribute("value", x);option.innerHTML = pname[x];selectEle.appendChild(option);}//alert("load province success!");}//加载城市function city(select){var cname = [           ["海淀区","朝阳区","丰台区"], ["黄浦区","卢湾区","长宁区"], ["广州市","深圳市","珠海市"]];//添加城市的option标签with(select){if(value){var select = document.getElementById("city");//删除城市的节点select.innerHTML="<option>请选择</option>";//获取值为value的城市 for(var x=0;x<cname[value].length;x++){var option = document.createElement("option");option.setAttribute("value", cname[value][x]);option.innerHTML = cname[value][x];select.appendChild(option);//console.log(cname[value][x]);} }}//alert("load city success!");}</script></head><body><select name="province" id="province" onfocus="province(this);" onchange="city(this);"><option>请选择</option><!-- <option value="bj">北京</option><option value="sh">上海</option><option value="gd">广东</option> --></select><select name="city" id="city"><option>请选择</option></select></body></html>

0 0