<select>下拉列表
<select>列表是前端中常用的一个标签,但我总是会忘记这标签的一个属性和用法
这是两个下拉列表,一个有用来选择省份或城市,另一个用来选择相对应的城市或区。
1 <body> 2 3 省份<select name="province" id="province" onchange="getCity()"> 4 <option value="">请选择省份</option> 5 <option value="江苏">江苏</option> 6 <option value="浙江">浙江</option> 7 <option value="上海">上海</option> 8 <option value="newYork">newYork</option> 9 10 </select> 11 城市<select name="city" id="city"> 12 <option value="">请选择城市</option> 13 </select> 14 15 </body>
这里我依然使用AJax局部刷新,当选择好城市或省份之后,在后台根据选择的省份而返回不一样的xml文档
var setCity=document.getElementById("city");
setCity.options.length=1;//取得id为“city”的选择器,并将选择器的条目暂时设为1,因为我要确定“请选择城市”出现
var xml=ajax.responseXML; //从后台取得xml文件
var cityArray=xml.getElementsByTagName("city"); //在xml文档中取出<city标签的对象的集合
for(i=0;i<cityArray.length;i++){ //利用循环,将所有city节点的文本都存到city的select的条目中
var city=cityArray[i].firstChild.nodeValue; //根据集合的顺序一一得到节点的文本
var option=new Option(city,city); //创建一个新条目
setCity.add(option); //将新条目保存到下列列表中
}
var city=cityArray[i].firstChild.nodeValue; //我们有了标签对象的集合,然后去取这个对象的的第一个子节点的文本
前端知识还很薄弱,后面继续加强