复制代码 代码如下:
<script type="text/javascript"> <BR>//初始化一个二维数组存储城市列表项 <BR>var cities=[ <BR>["安庆","合肥","桐城"], <BR>["石家庄","保定","唐山"], <BR>["郑州","洛阳","开封"] <BR>]; <BR>//选中某个省份时候，调用添加城市的方法 <BR>function provinceChanged(sel){ <BR>//alert("select的长度"+sel.options.length); <BR>//sel其实就是select对象 <BR>//遍历options集合，查找选中的选项 <BR>for(var x=0;x<sel.options.length;x++) <BR>{ <BR>var opt=sel.options[x]; <BR>if(opt.selected) <BR>{ <BR>//给被选择的城市的select 添加option <BR>addCityToSelect(x) <BR>} <BR>} <BR>} <BR>//添加选中省份下的城市项到city的select中 <BR>function addCityToSelect(x){ <BR>//从二维数组中找出对应的城市 <BR>var city=cities[x-1]; <BR>var citySelect=document.getElementById("select_city"); <BR>/*==================删除节点中已经存在的元素=============== <BR>在第二次或第n次调用方法的时候城市select对象中已经添加了之前添加的节点，所以有清空。 <BR>思路1：select对象的removeChild(),所以通过循环遍历可以删除字节点。 <BR>思路2：直接设置select.options.length=1可以实现相同效果。 <BR>*/ <BR>//设置城市的select对象下的options长度为1 <BR>citySelect.options.length=1; <BR>//设置options集合的长度，删除 <BR>//citySelect.options.length=1; <BR>for(var x=0;x<city.length;x++) <BR>{ <BR>//创建元素节点对象 <BR>var optionName=document.createElement("option"); <BR>//给option设置显示内容 <BR>optionName.innerHTML=city[x]; <BR>//将创建的option添加到select <BR>citySelect.appendChild(optionName); <BR>/* <BR>在这个地方将某一个省份下面的所有城市添加到citySelect对象下面以后 <BR>当第二次选择第二个省份的时候，第二个省份的下面的所有城市有会被追加到 <BR>citySelect节点下面。这样的效果就错了。所以要求在每次添加之前，要 <BR>对citySelect节点下面的内容进行清空。接着看： <BR>==================删除节点中已经存在的元素=============== <BR>*/ <BR>} <BR>} <BR></script>
