JS级联下拉列表，DOM编程

最新推荐文章于 2022-05-06 17:54:47 发布

fiona0425

最新推荐文章于 2022-05-06 17:54:47 发布

阅读量860

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： dom 编程 javascript

本文链接：https://blog.youkuaiyun.com/Sunflowerfiona/article/details/49870759

web前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用DOM操作在网页上创建JS级联下拉列表，包括创建新节点、添加到元素树、删除节点、替换节点以及删除属性节点的方法，通过这些操作实现了级联效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>