DHTML技术演示---下拉菜单技术演示2---二级联动和添加附件(文件)技术演示

本文链接：https://blog.csdn.net/weixin_37720904/article/details/72179892

我们在注册的时候经常会遇到二级联动的下拉菜单，我们一省、市为例学习。如图
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>选择省事</title>
        <script type="text/javascript">
            function sel(oSelNode){
                //下面二维数组中的数据以后可以从后台读取，这里直接赋值了
                var collCities =[
                        ['选择城市'],
                        ['海淀区','东城区','西城区','朝阳区'],
                        ['益阳','长沙','株洲','湘潭'],
                        ['杭州','宁波','金华','温州'],
                        ['南昌','九江','萍乡','上饶']
                    ];
                // selectedIndex 设置或获取选中选项位于 select 对象中的位置。 
                var idx = oSelNode.selectedIndex;
                //把 对应的市区拿出来
                var arr = collCities[idx];
                // 再把 这个设置到 选择框中去,先要把前面加进去的删除掉
                var oSelNode2 = document.getElementById("pSe2");
                //先: 清空原二级下拉菜单中的选项

                //法1: 该方式要注意,集合中的数据是动态变化的,因此序号i不要++,,永远删第1行，因为删除之后后续的行会依次往上上来
                for(var i=1; i<oSelNode2.options.length;  ){ //此处不能i++ 
                    oSelNode2.removeChild(oSelNode2.options[i]);
                }

                for(var i=0;i<arr.length;i++){
                    //创建元素
                    var OpNode = document.createElement("option");
                    OpNode.innerHTML=arr[i];
                    //加到复选框中去
                    oSelNode2.appendChild(OpNode);
                }
            }
        </script>
    </head>

    <body>
        <select id="pSel" onchange="sel(this)">
            <option>选择省市</option>
            <option>北京</option>
            <option>湖南</option>
            <option>浙江</option>
            <option>江西</option>
        </select>
        <select id="pSe2">
            <option>选择市区</option>
        </select>

    </body>
</html>

演示创建表格实现自动添加附件和删除附件功能
这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
            td{
                border: 1px red solid;
                width: 200px;
                height: 25px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table id="table1">
            <tr>
                <td colspan="2" onclick="addFile(this)">添加附件</td>
            </tr>
            <tr>
               <td><input type="file"></td>
               <td><a href="javascript:void(0);" onclick="delFile(this);">删除附件</a></td>
            </tr>
        </table>
        <script type="text/javascript">
            function addFile(){
                var oTableNode = document.getElementById("table1");
                //插入行，insertRow（） 在表格中创建新行(tr)，并将行添加到 rows 集合中
                var oRowNode = oTableNode.insertRow();
                //插入单元格 insertCell()  在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
                var oCellNode1 = oRowNode.insertCell();
                var oCellNode2 = oRowNode.insertCell();

                oCellNode1.innerHTML = '<input type="file">';
                oCellNode2.innerHTML = '<a href="javascript:void(0);" onclick="delFile(this);">删除附件</a>';
            }
            function delFile(oANode){
               var oTrNode = oANode.parentNode.parentNode;
               oTrNode.parentNode.removeChild(oTrNode);
            }
        </script>
    </body>
</html>