<html><head><script>//底层数据源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<pro.length;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 provicevar provice=document.getElementById('provice');var c=document.getElementById('city');c.innerHTML='';for(var i=0;i<pro.length;i ){if(pro[i]==provice.value){var cs=city[i];for(var j=0;j<cs.length;j ){var option = document.createElement('option');option.innerHTML=cs[j];c.appendChild(option);}}}}//选择框</script></head><body onload="init()"><select id="provice" onchange="loadCity()"></select>==<select id = "city"></select></body></html>
评论