用JS简单实现级联下拉框（添加选项、删除、清空）

JavaScript简单实现的级联下拉框小功能记录

这里用"省份与城市"作为级联对象，在HTML头部来引用JS代码来实现。

实现思路：

以下内容，我们省份用prov表示，城市用city表示。
（1）在JS中我们可以使用document.getElement(id)来获取指定id的标签元素。
（2）对于<select></ select>标签，获取到这个下拉框中的定位符。
（3）有了这个定位符，利用value属性就可以获取到下拉框选项中的option。
（4）有了option选项就可以用来做判断---->有了判断就可以对正确的结果进行操作：如添加对应的option选项。

<script>
	function getCity(prov,citys){
		/*
		 * 获取选择的省份
		 * [prov.selectedIndex]为被选中选项的下标
		 * .text则是获取对应的值
		 */
		var provs = prov.options[prov.selectedIndex].text; 
		// 获取城市下拉框
		var city = document.getElementById(citys);
		// 清空城市下拉框
		city.length=0;
		// 判断所选省份
		switch (provs){
			// 找到对应的省份后就可以进行添加选项的操作
			case '福建省':
				// 给对应的省份添加城市
				var op1 = new Option("福州市","福州市");
				var op2 = new Option("厦门市","厦门市");
				var op3 = new Option("莆田市","莆田市");
				city.add(op1);
				city.add(op2);
				city.add(op3);
				break;
			case '山西省':
			default:
				break;
		}
	}
</ script>

效果展示：

功能增加：添加，删除与清空

添加：

在前面内容中，我们可以看出select与option的关系就像是数组名与数组元素值。所以通过document.getElement(id)获取到的实际是一个select数组。

实现思路：

（1）要实现添加就要获取到select数组 ，这里用provs表示。
（2）获取数组后，通过var opt = new Option("显示内容","value值")创建option选项。
（3）通过add(opt)方法，添加到数组中。

实现代码：

/************************************ 添加省份 ************************************/
/*
 * prov  == 传进来的标签的id值
 * flag：为了第二个检验函数的输出
 */
function addProv(prov){
	// 获取省份的select数组
	var provArr = document.getElementById(prov);
//				alert(provArr[0].value);
	// 获取要添加的省份的值
	var newProv = document.getElementById("newCity").value;
	// 判断新省份是否已存在
	var flag = true; // 不存在为true，存在为false
	for(var i=0;i<provArr.length;i++){
		if(newProv == provArr[i].value || newProv == ''){
			flag = false;
			break;
		}
	}
	// 显示添加成功
	checkAdd(provArr,newProv,flag);
}
/************************************ 检验添加 ************************************/		
/*
 * provArr == 获取到的select数组
 * newProv == 新省份
 * flag == 判断标记
 */	
function checkAdd(provArr,newProv,flag){
		var msgTip = document.getElementById("tip");
		if(flag){
				// 创建新的省份选项
			var opt = new Option(newProv,newProv);
			provArr.add(opt);
			// 清除文本框中的内容
			var cityText = document.getElementById("newCity");
			cityText.value = '';
			msgTip.innerHTML = "添加成功";
			msgTip.style.color = "green";
		}else{
			msgTip.innerHTML = "输入为空或省份已存在";
			msgTip.style.color = "red";
		}
	}

删除：

实现思路：

基本上同添加函数的思路一样获取要操作的数组，利用remove("要删除的下标")方法删除指定选项。

实现代码：

function delProv(prov){
	var msgTip = document.getElementById("tip");
		// 获取目标省份
		var tarprov = document.getElementById("newCity").value;
		// 获取省份的select数组
		var provArr = document.getElementById(prov);
		// 获取文本框
		var cityText = document.getElementById("newCity");
		
		var flag = false; // 不存在为false，存在为true
		for(var i=0;i<provArr.length;i++){
			if(tarprov == provArr[i].value){
				// 找到并删除
				provArr.remove(i);
				flag = true;
				break;
			}
		}
		if(flag == true){
			
			cityText.value = '';  // 清空文本框
			msgTip.innerHTML= "删除成功";
			msgTip.className="succeed";
		}else{
			cityText.value = '';
			msgTip.innerHTML = "输入为空或所选省份不存在";
			msgTip.className = "error";
		}
	}

清空：

实现思路：

直接将获取到的数组长度（length）置位0，即provArr.options.length = 0、

实现代码:

function clearProv(prov){
   	// 获取省份的select数组
   		var provArr = document.getElementById(prov);
   		provArr.options.length = 0;
   	}

实验效果展示：