我设置一个选择省份实属无奈之举

function address(){
	var sheng=document.getElementById("sheng");
	var shi=document.getElementById("shi");

	var shengA=["-请选择城市-","北京市","天津市","河北省","河南省"];
	var shiA=["-请选择地区-"];	

	for(var x=0;x<shengA.length;x++){
		selectAdd(sheng,shengA[x],shengA[x]);
	}
	for(var y=0;y<shiA.length;y++){
		selectAdd(shi,shiA[y],shiA[y]);
	}



	
}
function selectAdd(obj,name,value){
	obj.options.add(new Option(name,value));
}


function selectedDiqu(){
	var sheng=document.getElementById("sheng");
	var shi=document.getElementById("shi");

	

	if(sheng.value=="天津市"){
		var tj=new Array("西青区","武清区");
		shi.options.length=0;

		for(var t=0;t<tj.length;t++){
			selectAdd(shi,tj[t],tj[t]);
			}
		}

//************************************************
	if(sheng.value=="北京市"){
		var bj=new Array("朝阳区","西城区");
		shi.options.length=0;

		for(var i=0;i<bj.length;i++){
			selectAdd(shi,bj[i],bj[i]);
		}

	}

//****************************************************

//************************************************
	if(sheng.value=="河北省"){
		var hb=new Array("石家庄","邯郸区");
		shi.options.length=0;

		for(var h=0;h<hb.length;h++){
			selectAdd(shi,hb[h],hb[h]);
		}

	}

//****************************************************
	
//************************************************
	if(sheng.value=="河南省"){
		var hn=new Array("郑州市","开封市");
		shi.options.length=0;

		for(var i=0;i<hn.length;i++){
			selectAdd(shi,hn[i],hn[i]);
		}

	}

//****************************************************




}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="address()">
<form>
省份：
<!--  请在此补充代码 -->
<select name="sheng" id="sheng" onchange="selectedDiqu()"></select>
市/区：
<!--  请在此补充代码 -->
<select name="shi" id="shi" onchange="selectedDiqu()"></select>
</form>
</body>
</html>

1、是这样的，我发现刷新页面后，会首先显示北京，这时候点击省份是有除了北京之外的省份

必须要选择别的省份cheng，再选择北京，才能让北京对应的省份为朝阳和东城。所以怎样能一上来，就默认北京是与之对应的省份呢？简单的方法我知道，大不了就像我那样，把初始的就改成对应的省份？但是，这样的程序我认为不太好。有什么其他更高级的办法吗？

2、我不太理解 Onload 后边，可以有多个fun...吗可以的话怎么写？ onload的具体作用是什么？

3、Onchange是所有的select里都要加吗？它的具体作用是什么？

LLLL_ 2019-10-23

源自：JavaScript入门 7-8 编程练习

收起

1回答

好帮手慕小班回答被采纳获得+3积分 2019-10-23 15:50:10

同学你好，1、在本题目中，城市和市区值是固定的，我们可以将市区和城市数组，定义为全局变量，初始化时将城市以及市区都初始化。默认省份是北京，那么市区初始化为北京下面的市区，比如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="address()">
<form>
省份：
<!--  请在此补充代码 -->
<select name="shengfen" id="shengfen" onchange="linkage()"></select>
市/区：
<!--  请在此补充代码 -->
<select name="shiqu" id="shiqu"></select>
</form>
</body>
</html>

//省份与市区值
var arrSf=["北京市","天津市","河北省","河南省"];
var arrSq=["朝阳区","西城区","石家庄","邯郸市","西青区","武清区","郑州市","开封市"];
/*初始化下拉框*/
function address(){
        /*请在此补充代码*/  
    var shengfen=document.getElementById("shengfen");
    var shiqu=document.getElementById("shiqu");
    //加载所有省份，默认选中第一个省份,北京
    for(var i=0;i<arrSf.length;i++){
        selectAdd(shengfen,arrSf[i],arrSf[i]);
    }
    //默认选中北京的市区
    for(var i=0;i<2;i++){
        selectAdd(shiqu,arrSq[i],arrSq[i]);
    }
         
}
//添加下拉框的值
function selectAdd(obj,name,value){
        /*请在此补充代码*/  
        obj.options.add(new Option(name,value));
}
//删除下拉框的值
function deleteSelect(){
    var shiqu=document.getElementById("shiqu");
    //dd.options.remove(1);
    for(i=shiqu.length;i>=0;i--){
        shiqu.options.remove(0);
    }
}
//下拉框改变函数
function linkage(){
    var shengfen=document.getElementById("shengfen");
    var shiqu=document.getElementById("shiqu");
    var value=shengfen.value;//获取下拉框选中的值
    deleteSelect(); //添加市区的值     
    if(value=="北京市"){
        selectAdd(shiqu,arrSq[0],arrSq[0]);
        selectAdd(shiqu,arrSq[1],arrSq[1]);
          
    }if(value=="河北省"){
        selectAdd(shiqu,arrSq[2],arrSq[2]);
        selectAdd(shiqu,arrSq[3],arrSq[3]);
          
    }if(value=="天津市"){
        selectAdd(shiqu,arrSq[4],arrSq[4]);
        selectAdd(shiqu,arrSq[5],arrSq[5]);
          
    }if(value=="河南省"){
        selectAdd(shiqu,arrSq[6],arrSq[6]);
        selectAdd(shiqu,arrSq[7],arrSq[7]);
         
    }
}

2、onload 一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等）后，就执行这一段脚本，所以onload方法也可以理解为页面刷新时的事件，当加载页面时就加载address()函数。支持onload事件的标签有<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>。

onload 里可以有多个function函数呐，比如