JavaScript省市联动菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

//初始化一个二维数组存储城市列表项

var cities=[

           ["安庆","合肥","桐城"],

           ["石家庄","保定","唐山"],

           ["郑州","洛阳","开封"]

           ];

//选中某个省份时候。调用加入城市的方法

function provinceChanged(sel){

	//alert("select的长度"+sel.options.length);

	//sel事实上就是select对象

	//遍历options集合，查找选中的选项

	for(var x=0;x<sel.options.length;x++)

		{

		var opt=sel.options[x];

		if(opt.selected)

			{

			//给被选择的城市的select 加入option

			addCityToSelect(x)

			}

		}

}

//加入选中省份下的城市项到city的select中

function addCityToSelect(x){

	//从二维数组中找出相应的城市

	var city=cities[x-1];

	var citySelect=document.getElementById("select_city");

	/*==================删除节点中已经存在的元素===============

	在第二次或第n次调用方法的时候城市select对象中已经加入了之前加入的节点，所以有清空。

思路1：select对象的removeChild(),所以通过循环遍历能够删除字节点。

	思路2：直接设置select.options.length=1能够实现同样效果。

	*/

	//设置城市的select对象下的options长度为1

	citySelect.options.length=1;

	//设置options集合的长度，删除

	//citySelect.options.length=1;

	for(var x=0;x<city.length;x++)

		{

		//创建元素节点对象

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

		//给option设置显示内容

		optionName.innerHTML=city[x];

		//将创建的option加入到select

		citySelect.appendChild(optionName);

		/*

		在这个地方将某一个省份以下的全部城市加入到citySelect对象以下以后

		当第二次选择第二个省份的时候。第二个省份的以下的全部城市有会被追加到

		citySelect节点以下。这种效果就错了。

所以要求在每次加入之前，要

		对citySelect节点以下的内容进行清空。接着看：

		==================删除节点中已经存在的元素===============

		*/

		}

}

</script>

</head>

<body>

<select onchange="provinceChanged(this);">

<!--this的含义：是指select对象调用provinceChanged(this),而且在此方法中

把对象本身作为參数传递，以便对其进行操作。

-->

<option>请选择省份</option>

<option>安徽</option>

<option>河北</option>

<option>河南</option>

</select>

<select id="select_city">

<option>请选择城市</option>

</select>

</body>

</html>
巴特西

JavaScript省市联动菜单

最新文章

热门文章
