简书 php三级联动,JS 实现三级联动

HTML部分

三级联动

请选择省份

请选择城市

请选择区县

JS部分

// var address = new Object();

var forms = document.forms[0]; //获取forms表单节点

//创建省份数组

var address = new Array();

address[0] = ['湖北省','湖南省','河南省'];

//创建城市数组

address["0_1"] = ['武汉市','鄂州市','黄冈市']

address["0_2"] = ['长沙市','娄底市','怀化市']

address["0_3"] = ['郑州市','洛阳市','开封市']

address["0_1_1"] = ['武昌区','汉阳区','洪山区']

address["0_1_2"] = ['鄂城区','葛店区','华容区']

address["0_1_3"] = ['黄州区','罗田区','梁子湖区']

//创建区县数组

address["0_2_1"] = ['aaa','sss','ddd']

address["0_2_2"] = ['aaa','sss','ddd']

address["0_2_3"] = ['aaa','sss','ddd']

address["0_3_1"] = ['aaa','sss','ddd']

address["0_3_2"] = ['aaa','sss','ddd']

address["0_3_3"] = ['aaa','sss','ddd']

//循环遍历下标【0】的省份数组

for( i = 0 ; i

var opt = document.createElement("option");//创建节点

opt.innerHTML = address[0][i];//添加内容

forms.pro.appendChild(opt);//追加对应节点

}

//省份节点发生改变的时候触发的方法

forms.pro.onchange = function(){

if (forms.pro.selectedIndex !=0){//判断selectedIndex下标是否为0

forms.city.innerHTML = "请选择城市"

forms.country.innerHTML = "请选择区县"

forms.city.disabled = false;// 不为0的情况下，解除城市选项的锁定

proNum = forms.pro.selectedIndex;

for(var i = 0 ; i

var opt = document.createElement("option")

opt.innerHTML = address["0_"+proNum][i];

forms.city.appendChild(opt)

}

}else{

forms.city.disabled = true;

forms.country.disabled = true;

forms.city.innerHTML = "请选择城市"

forms.country.innerHTML = "请选择区县"

}

forms.city.onchange = function(){

if (forms.city.selectedIndex !=0){

forms.country.innerHTML = "请选择区县"

forms.country.disabled = false;

proNum = forms.pro.selectedIndex;

var numum = forms.city.selectedIndex;

for(var i = 0 ; i

var opt = document.createElement("option");

opt.innerHTML = address["0_"+proNum+"_"+numum][i];

forms.country.appendChild(opt);

}

}else{

forms.country.disabled = true;

forms.country.innerHTML = "请选择区县"

}

简书 php三级联动,JS 实现三级联动相关推荐

纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
仿qq省市区三级联动js
HTML Code: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> & ...
纯JS省市区三级不联动数据有更新
// 纯JS省市区三级不联动 // // <?php Yii::app()->clientScript->registerScriptFile( Yii::app()->req ...
全国省市县三级地址联动js
/* * 全国三级城市联动 js版 */ function Dsy() {this.Items = {}; } Dsy.prototype.add = function (id, iArray) {t ...
使用JS实现三级联动
利用js实现三级联动直接放代码: <div class="wrapper">省:<select id="province" onchange ...
JS 省市区三级联动
JS 省市区三级联动:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
javaScript案例——二级联动、三级联动、省市区三级联动
二级联动: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
python三级联动_ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如 ...

简书 php三级联动,JS 实现三级联动

简书 php三级联动,JS 实现三级联动相关推荐

最新文章

热门文章