网页编程--JavaScript之二级联动菜单设计

来源：互联网发布：如何在淘宝上找店铺编辑：程序博客网时间：2024/05/01 05:24
<!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 selectProvince(Node) {//以后应该利用ajax技术动态从后台获取json数据，然后进行更新城市下拉框组件(subSelid)//现在后台技术还没学，暂时直接写成死的var collCities = [ [ '选择城市' ], [ '朝阳区', '海淀区', '东城区', '西城区' ],[ '益阳', '长沙', '株洲', '常德' ], [ '杭州', '宁波', '金华', '温州' ],[ '南昌', '九江', '萍乡', '上饶' ] ];/*如果数据是用Map-Json封装，则用下面这段来解析  var arr={"beijing":['朝阳区','海淀区','东城区','西城区'],      "hunan":['益阳','长沙','株洲','常德']};  var key = node.options[node.selectedIndex].value;  //map.key,  map[strKey]   var arrCities = collCities.key; //collCities[key] *///用户当前选项    var selNum = Node.selectedIndex;var arrCities = collCities[selNum];var oSubSelNode = document.getElementById("selectid");//清空下拦菜单组件// 法1：底层手动清除//         for(var i = 1;i<oSubSelNode.options.length;){//             oSubSelNode.removeChild(oSubSelNode.options[i]);            //         }//法二:表明长度为1,其他都不要了oSubSelNode.options.length = 1; ####这里很活//把所对应的市区加入到二级选相框中for ( var i = 0; i < arrCities.length; i++) {var oOptionNode = document.createElement("option");oOptionNode.innerHTML = arrCities[i];oSubSelNode.appendChild(oOptionNode);}}</script></head><body><h2>二级联动菜单</h2><select onclick="selectProvince(this)"><option value="none" selected="selected">--请选择省份--</option><option value="beijing">北京</option><option value="hunan">湖南</option><option value="zhejiang">浙江</option><option value="jiangxi">江西</option></select><select id="selectid"><option value="none" selected="selected">--请选择市区--</option></select></body></html>
阅读全文
0 0