JS级联下拉列表,DOM编程

使用DOM编程,在网页中完成简单的JS级联下拉列表。
先整理常用的DOM操作:

创建新节点

 document.createElement(‘div’)
 document.createAttribute(‘class’);
 document.createTextNode(‘文本’)   e.innerHTML 
 document.createComment(‘注释内容’); 
document.createDocumentFragment();

把新节点添加到元素树

e.setAttributeNode(newAttr)
e.appendChild(newTxt/newElement/fragment)
e.insertBefore(newTxt/newElement/fragment, existingChild)

删除已有节点

  var deletedChild = parentNode.removeChild( existingChild );

替换已有节点

  var replacedChild = parentNode.replaceChild( newChild,  existingChild );

删除属性节点

element.removeAttribute(‘属性名’);
element.removeAttributeNode(attrNode);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style type="text/css"> *{margin:0; padding:0;} </style>
 </head>

 <body>
  <h2>省市级联下拉</h2>
  <select id="provinces" onchange='changeCity(this.value)'>
    <option value="-1">--请选择--</option>
  </select>
  <select id="citys">
    <option value="-1">--请选择--</option>
  </select>
  <script> var ps = ['北京市','天津市','河北省']; var cs = [ ['东城区','西城'], ['河东区','和平区'], ['廊坊市','石家庄市','唐山市'] ]; var fragment = document.createDocumentFragment(); for(var i=0; i<ps.length; i++){ var option = document.createElement('option'); option.setAttribute('value', i); option.innerHTML = ps[i]; fragment.appendChild(option); } document.getElementById('provinces').appendChild(fragment); //添加地级市 function changeCity(pno){ if(pno==-1){ return; } //删除下拉框中已有的地级市 var cSelect = document.getElementById('citys'); while(cSelect.children.length>0){ cSelect.removeChild(cSelect.lastElementChild); } /*cSelect.innerHTML = '';*/ //再添加当前指定省份中的地级市 var cityArr = cs[pno]; var fragment = document.createDocumentFragment(); for(var i=0; i<cityArr.length; i++){ var option = document.createElement('option'); option.setAttribute('value', i); option.innerHTML = cityArr[i]; fragment.appendChild(option); } cSelect.appendChild(fragment); } </script>
 </body>
</html>

JS级联下拉列表,DOM编程_第1张图片

代码可直接实现如图效果。

你可能感兴趣的:(JavaScript,编程,dom)