<html> <head> <title>DHTML技术演示---select的使用--二级连动菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function selectCity(){ //json: 用一个二维数组存储"省份-城市集合",以后该数据要来自后台 var collProvices ={"beijing" : ['海淀区','东城区','西城区','朝阳区'], "zhejiang" : ['杭州','宁波','金华','温州'], "hunan" : ['益阳','长沙','株洲','湘潭'], "jiangxi" : ['南昌','九江','萍乡','上饶'] }; //{}这个是用来存key:value的，value可以是任意类型（数组集合都可以）、[]这个是数组 //alert(collProvices["beijing"][2]);//西城区 //获取用户所选择省份的下辖城市集合 var oSelNode = document.getElementById("selid"); var index = oSelNode.selectedIndex;// selectedIndex选中哪项，返回数字 var proviceName = oSelNode.options[index].value;//获得选中的那项的value var arrCities = collProvices[proviceName];//获得选中的那个省份的下辖城市数组 var oSubSelNode = document.getElementById("subselid");//获得第二个下拉列表对象 //把下拉菜单"subselid"中原有的内容清空 //注意，数组删除之后，长度是自动更新的 //法1--列表从前面开始移除 // for(var x=1;x<oSubSelNode.options.length;){//注意，数组删除之后，长度是自动更新的，因此for最后不要用"x++"修正 // oSubSelNode.removeChild( oSubSelNode.options[x] ); // } //oSubSelNode.length和oSubSelNode.options.length的值一样 //oSubSelNode[x]和oSubSelNode.options[x]一样 //法2--列表从后面开始移除 // for(var x=oSubSelNode.length-1;x>=1;x--){ // oSubSelNode.removeChild( oSubSelNode[x] ); // } //法3--直接给oSubSelNode.options.length或oSubSelNode.length赋值 oSubSelNode.options.length=1; //长度设置为1 ，那么剩余的选项自动被删掉 //把城市集合中的每个元素添加到下拉菜单"subselid"当中 for(var x=0;x<arrCities.length;x++){ var optionNode = document.createElement("option"); optionNode.innerHTML=arrCities[x]; //oPtionNode.value=...[x];//正式开发，应该还有该选项对应的value值要赋,这里我们就省略了。 oSubSelNode.appendChild(optionNode); } } </script> </head> <body> <select onchange="selectCity()"> <option>--选择省份--</option> <option value="beijing">北京</option> <option value="hunan">湖南</option> <option value="zhejiang">浙江</option> <option value="jiangxi">江西</option> </select> <select> <option>--选择城市--</option> </select> </body> </html>
360浏览器8.1 演示结果：
file组件–添加与删除附件
没有与后台联系的功能哦，只是学下html中的技术
演示代码：