javascript省市级联
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>省市级联</title></head><body><select onchange="changeCity(this.value)"><option>--请选择省份--</option><option value="0">北京</option><option value="1">浙江省</option><option value="2">河北省</option><option value="3">广东省</option></select><select id="city"></select></body></html><script>//创建二维数组存储省份和对应的城市var cityList = new Array();cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");function changeCity(val) {//获取到城市的下拉列表框var city = document.getElementById("city");//先去清空原有的城市下拉列表内容city.options.length = 0;var arr = cityList[val];for(var i = 0; i < arr.length; i++) {//创建option元素节点var option = document.createElement("option");//设置option元素节点的内容和valueoption.innerHTML = arr[i];option.value = arr[i];//将新创建的option节点添加到城市下拉框中city.appendChild(option);}}</script>
效果图;
x
jquery省市级联
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>省市级联</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script></head><body><select id="province"><option>--请选择省份--</option><option value="0">北京</option><option value="1">浙江省</option><option value="2">河北省</option><option value="3">广东省</option></select><select id="city"></select></body></html><script>$(function() {//创建二维数组存储省份和对应的城市var cityList = new Array();cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");$("#province").change(function() {//获取到城市的下拉列表框var city = $("#city");//先去清空原有的列表内容city.html("");var arr = cityList[$(this).val()];var str = "";for(var i = 0; i < arr.length; i++) {str += '<option value=' + arr[i] + '>' + arr[i] + '</option>';}city.html(str);});});</script>
效果图：
