在省市二级联动中应注意:
js所创建的dom节点要先转为jQuery对象后才能操作jQuery方法,jQuery能实现的js都能实现,但js能实现的jQuery不一定能实现。
步骤如下:
$(function(){
//1.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
$("#province").change(function(){
$("#city").empty();//清除上一次操作所添加的城市元素节点
//2.获取用户选择的省份,此处设置的省份的value与数组下标一致(<option value="0">湖北)
var val = this.value;
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
//注意:textNode和opEle节点都是有JavaScript所创建的,要先转为jQuery对象才能操作jQuery方法(append(),appendTo())
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
})
;