左右select选择框

最新推荐文章于 2021-06-03 01:47:06 发布

kingmxj

最新推荐文章于 2021-06-03 01:47:06 发布

阅读量212

点赞数

分类专栏： html 文章标签： HTML

html 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>

<INPUT TYPE="text" id="data" style="width:700px;height:50px" value="王立,李平,张立,冯立,立为,张明,王一,李国,平民,王与" readonly>
  <TABLE>
	  <TR>
		<TD colspan="3">
			<INPUT TYPE="text" NAME="tt"  onkeyup="changeValue(this.value)">
		</TD>
	  </TR>

	  <TR>
		<TD>
			<SELECT NAME="" size="10" style="width:150px" id="s1" ondblclick="changePosition('1')" >

			</SELECT>
		</TD>

		<TD>
			<input type="button" value=">>" id="b1" onclick="changePosition('1')"/><br/>
			<input type="button" value="<<" id="b2" onclick="changePosition('2')"/><br/>

			<input type="button" value=">>>>" id="b1" onclick="changeAll('1')"/><br/>
			<input type="button" value="<<<<" id="b2" onclick="changeAll('2')"/><br/>
		</TD>

		<TD>
			<SELECT NAME="" size="10" style="width:150px" id="s2" ondblclick="changePosition('2')" >

			</SELECT>
		</TD>
	  </TR>
  </TABLE>


  <SCRIPT LANGUAGE="JavaScript">
  <!--

    var s1 = document.getElementById("s1");//左面的select
    var s2 = document.getElementById("s2");//右面的select

	/**
	**  z=1时，从左到右；z=2时，从右到左
	**/
	function changePosition(z){

		var o1 = s1.options;
		if(z=="2"){
			o1 = s2.options;
		}

		for(var i=0;i<o1.length;i++){

			if(o1[i].selected){
				var newOption = document.createElement("option");
				newOption.value = o1[i].value;
				newOption.innerHTML = o1[i].innerHTML;
				if(z=="2"){
					s1.appendChild(newOption);
				}else{
					s2.appendChild(newOption);
				}

				o1[i]=null;


			}
		}

	}

	/**
	**  z=1时，从左到右；z=2时，从右到左
	**/
	function changeAll(z){

		var o1 = s1.options;
		if(z=="2"){
			o1 = s2.options;
		}
		var len = o1.length;

		for(var i=0;i<len;i++){
			var oldOption = o1[i];
			var newOption = document.createElement("option");
			newOption.value = oldOption.value;
			newOption.innerHTML = oldOption.innerHTML;
			if(z=="2"){
				s1.appendChild(newOption);
			}else{
				s2.appendChild(newOption);
			}

		}
		if(z=="2"){
			s2.innerHTML = "";
		}else{
			s1.innerHTML = "";
		}

	}

	/**
	**  当在输入框输入数据时，左面的select会根据输入值比对信息，显示含有输入值的数据
	**/
	function changeValue(z){
		var s1 = document.getElementById("s1");//左面的select
		var s2 = document.getElementById("s2");//右面的select
		var o2 = s2.options;

		var data = document.getElementById("data").value;//存放数据的输入框(如果要用到项目中，这里一定要改)
		var ds = data.split(",");//数据用","隔开

		//如果输入值为空		
		if(z==""){
			s1.innerHTML = "";
			for(var i=0;i<ds.length;i++){
				var _va = 0;//用于比较左右select中的值是否相等
				var va = ds[i];
				//循环右面的select中的value，右面有的option左面就不应该有了
				for(var j=0;j<o2.length;j++){
					var _o2 = o2[j].innerHTML;
					if(va == _o2){
						_va = 1;
						break;
					}
				}
				//右面的option没有的，左面有
				if( _va == 0 ){
					var newOption = document.createElement("option");
					newOption.value = va;
					newOption.innerHTML = va;

					s1.appendChild(newOption);
				}
			}
		}else{//输入值不为空
			s1.innerHTML = "";
			for(var i=0;i<ds.length;i++){
				var _va = 0;//用于比较左右select中的值是否相等
				var va = ds[i];
				//左面的select必须包含输入值
				if(va.indexOf(z) != -1){
					//循环右面的select中的value，右面有的option左面就不应该有了
					for(var j=0;j<o2.length;j++){
						var _o2 = o2[j].innerHTML;
						if(va == _o2){
							_va = 1;
							break;
						}
					}
					//右面的option没有的，左面有
					if( _va == 0 ){
						var newOption = document.createElement("option");
						newOption.value = va;
						newOption.innerHTML = va;

						s1.appendChild(newOption);
					}

				}
			}
		}

	}

	//初始化数据
	function initData(){
		var s1 = document.getElementById("s1");
		var data = document.getElementById("data").value;
		var ds = data.split(",");

		for(var i=0;i<ds.length;i++){
			var va = ds[i];
			var newOption = document.createElement("option");
			newOption.value = va;
			newOption.innerHTML = va;

			s1.appendChild(newOption);	
		}
	}

	initData();
  //-->
  </SCRIPT>
 </BODY>
</HTML>