javascript对DOM操作实例之联动菜单

来源：互联网发布：网络投资平台排名编辑：程序博客网时间：2024/04/28 23:43
联动菜单<!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><script type="text/javascript">function change(){     //事先预置好每个省所对应的市，这是一个二维数组，数组中的那个数组是每一个省下的城市    //0对应着无，1对应着山东，2对应着浙江，3对应着江苏    //数组中的每一个元素是数组，其值就是当前这个省所对应的城市的名称    var cities =[//每个省所对应的市。         ["请选择"],["青岛","济南","烟台"],["杭州","宁波","温州"],["南京","无锡","苏州"]    ];    //获取当前的省    //删除所有的市    //然后添加这个省下面的市     var province = document.getElementById("province");     var pindex = province.value;//获取省份的序号     //删除所有的市     var city = document.getElementById("city");     //获取城市下的option标签    // var options = city.getElementsByTagName("option");    // for(var i =0;i<options.length;i++){         //用子元素点父元素然后child去删除。    //   options[i].parentNode.removeChild(options[i]);                 //   }    //或者直接去清空这个元素的内容。让他内容等于空。    city.innerHTML ="";     //重新添加这个省下面的市     //pindex是省份返回的value的值，在城市的数组中对应的一个数组有对应的城市      var pcities = cities[pindex];      for (var i=0;i<pcities.length;i++){          //创建节点          var option = document.createElement("option");          //设置新节点的值          option.setAttribute("vale",i);          //设置新节点的内容          option.innerHTML = pcities[i];          //将新节点追加到城市下拉选中          city.appendChild(option);          }    //可以直接用select.value就是当前选中的option对应的value值    }</script></head><body>省：<select id="province" onchange="change()"><!-- onchange事件是改变事件，当值发生改变时，触发 --><!-- option的内容是山东啊浙江这些，对应的value是select节点的返回值，返回的是选中的option的value值--><option value="0">请选择</option><option value="1">山东省</option><option value="2">浙江省</option><option value="3">江苏省</option></select>&nbsp;&nbsp;市：<select id="city"><option>请选择</option></select></body></html>
这里写图片描述
0 0