JavaScript对表单元素下拉列表框的设置（地区）

JavaScript对表单元素下拉列表框的设置

一、效果图

二、代码实现

1.index.html文件部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="address()">
	<form>
		 省份：		
		<select name="city" id="city" onchange="linkage()"></select>
		 市/区：
		 <select name="street" id="street"></select>
	</form>
</body>
</html>

解析：

	 onload="address()" //表示在网页加载的时候执行address()方法
	 onchange="linkage()" //表示在选择选择框内容后执行linkage()方法

2.index.js文件部分

function address(){
  
    	//获取选择列表
    	var city=document.getElementById("city");
    	var cityArray=["北京市","天津市","河北省","河南省"];
    	var street=document.getElementById("street");
	    var BJstreet=["朝阳区","西城区"];
    	selectAdd(city,"city",cityArray);
    	selectAdd(street,"street",BJstreet);
}
//设置表单选择框内容方法
function selectAdd(obj,name,value){
		/*请在此补充代码*/  
		for(var i=0;i<value.length;i++){
		    obj.options.add(new Option(value[i],value[i]));
		}
		
}
//更新选择框内容方法（当选择点击完成后修改）
function linkage(){
	/*请在此补充代码*/
	var city=document.getElementById("city");
	var street=document.getElementById("street");
	var BJstreet=["朝阳区","西城区"];
	var TJstreet=["西青区","武清区"];
	var HBstreet=["石家庄","邯郸市"];
	var HNstreet=["郑州市","开封市"];

	var citySelected=city.value;
	 //清除原数据
    	street.options.length=0;
    	//修改新数据(根据城市名称设置相应的地区)
	if(citySelected=="北京市"){
	    selectAdd(street,"BJstreet",BJstreet);
	}else if(citySelected=="天津市"){
	    selectAdd(street,"TJstreet",TJstreet);
	}else if(citySelected=="河北省"){
	    selectAdd(street,"HBstreet",HBstreet);
	}else if(citySelected=="河南省"){
	    selectAdd(street,"HNstreet",HNstreet);
	}

}

解析：

	var city=document.getElementById("city"); //获取ID为"city"的文档元素对象
	city.options.add(new Option(name,value)); //设置"city"对象的数据，name是选择框里的文本显示，value是传递给后台的值
	city.value //获取对象元素后台数据的值
	street.options.length=0; //清除选择框里的数据 
            street.options.remove(n);//删除某个元素，删除后，后面的数据会顶上来
            obj.selectedIndex=1;//默认选择第一个数据显示
posted @ 2020-08-14 08:50  AlanHong  阅读(722)  评论(0)    收藏  举报