html级联搜索,html省市级联(select联动)示例源码

Posted 2021-06-30 weixin_39715187

【实例简介】

【实例截图】

【核心代码】

//底层数据源

var pro=['黑龙江','吉林','辽宁'];

//次级数据源要使用二维数组

var city=[

['哈尔滨','佳木斯','齐齐哈尔','大庆','鹤岗'],

['长春','四平','松原','吉林'],

['铁岭','大连','沈阳']

];

function init(){

loadpro();

loadCity();

}

//加载省级的选择函数

/*思路：在省级的select中加入option选项

*实现：找到provice选择框->创建option并加入select中

*->加入数量内容(.innerhtml)由数据源决定(循环)

*->先写入内容再添加到父级标签select中

*/

function loadpro(){

var provice=document.getElementById('provice');

for(var i=0;i

var option=document.createElement('option');

option.innerHTML=pro[i];

provice.appendChild(option);

}

}

//加载城市的选择函数

/*思路：在所选省级下的select中加入option城市

*实现：确认当前选择省级(确认索引)：1.找到省级的select中的值(value)2.将当前值与第i个省级对比(确认索引)

*->加入城市数据源中的第i组数据option：1.找到城市select 2.循环第i组数据加入(数量：二维长度)

*注意：没选择一次要清空城市选择框中的内容

*/

function loadCity(){

//找到select provice

var provice=document.getElementById('provice');

var c=document.getElementById('city');

c.innerHTML='';

for(var i=0;i

if(pro[i]==provice.value){

var cs=city[i];

for(var j=0;j

var option = document.createElement('option');

option.innerHTML=cs[j];

c.appendChild(option);

}

}

}

}

//选择框

==