select下拉列表 multiple 多选应用实例

最新推荐文章于 2024-07-14 02:37:49 发布
iteye_3856
最新推荐文章于 2024-07-14 02:37:49 发布
阅读量1.6k
点赞数
分类专栏： JavaScript 文章标签： J# Microsoft HTML
本文链接：https://blog.csdn.net/iteye_3856/article/details/81859306
版权
JavaScript 专栏收录该内容
18 篇文章 0 订阅
订阅专栏
<html>
<head>
<title>select下拉列表 multiple 多选应用实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

</head>

<body oncontextmenu="return true" bgcolor = "#E0EEFD";>

<!--body oncontextmenu="return true"
		style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E0EEFD', endColorStr='#FFFFFF', gradientType='0')"-->
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>操作</title>
</head>

<body>
<script language="javascript">

		function chk1(var1,var2)
			{

				var s1=document.getElementById(var1).options;
				for(var i=0;i<s1.length;i++){
				//var k =0 ;
					if(s1[i].selected==true){
					//k++;
					//alert(k);
						var s2=new Option(s1[i].text,s1[i].value);

						//如果有重复的，则删掉
						var reS2 = document.getElementById(var2).options ;
						for(var j=0;j<reS2.length;j++){
							if(s1[i].value==reS2[j].value){
								reS2.remove(reS2[j].index);
							}
						}

						reS2.add(s2);
						s1.remove(s1[i].index);
						i=i-1;
						s2.selected=true;
					}
				}
			}

		function chk2(var1,var2)
			{
				var s1=document.getElementById(var1).options;
				for(var i=0;i<s1.length;i++){
					if(s1[i].selected){
						var s2=new Option(s1[i].text,s1[i].value);

						//如果有重复的，则删掉
						var reS2 = document.getElementById(var2).options ;
						for(var j=0;j<reS2.length;j++){
							if(s1[i].value==reS2[j].value){
								reS2.remove(reS2[j].index);
							}
						}

						reS2.add(s2);
						s1.remove(s1[i].index);
						i=i-1;
						s2.selected=true;
					}
				}
			}
		function chk3(var1,var2)
			{

				var s1=document.getElementById(var1).options;
				for(var i=s1.length-1;i>=0;i--){
					var s2=new Option(s1[i].text,s1[i].value);

					//如果有重复的，则删掉
						var reS2 = document.getElementById(var2).options ;
						for(var j=0;j<reS2.length;j++){
							if(s1[i].value==reS2[j].value){
								reS2.remove(reS2[j].index);
							}
						}

					reS2.add(s2);
					s1.remove(s1[i].index);
					s2.selected=true;
				}
			}
		function chk4(var1,var2)
			{

				var s1=document.getElementById(var1).options;
				for(var i=s1.length-1;i>=0;i--){

					var s2=new Option(s1[i].text,s1[i].value);

					//如果有重复的，则删掉
						var reS2 = document.getElementById(var2).options ;
						for(var j=0;j<reS2.length;j++){
							if(s1[i].value==reS2[j].value){
								reS2.remove(reS2[j].index);
							}
						}

					reS2.add(s2);
					s1.remove(s1[i].index);
					s2.selected=true;
				}
			}

		function getSearchIdList(){
			document.getElementById("myForm").action= "admin.csszsearch.do?m=doUpdateSearchCs";
			document.getElementById("myForm").submit();
		}
		function getUpdateIdList(){
			document.getElementById("myForm2").action= "admin.csszupdate.do?m=doUpdateCs";
			document.getElementById("myForm2").submit();
		}
		</script>
<script >

     //关闭显示层
     function doClick(arg1){
         if(arg1 == "yglstyle"){
             if(yglstyle.style.display == "block"){
                 yglstyle.style.display = "none";
             }else{
                 yglstyle.style.display = "block";
             }
         }else if(arg1 == "wglstyle"){
             if(wglstyle.style.display == "block"){
                 wglstyle.style.display = "none";
             }else{
                 wglstyle.style.display = "block";
             }
         }else if(arg1 == "viewColumn"){
          	 if(viewColumn.style.display == "block"){
                 viewColumn.style.display = "none";
             }else{
                 viewColumn.style.display = "block";
             }
         }
     }

  </script>

  <center>
    <form name="myForm" id="myForm"   method="POST" >
      <table width="80%" border=0>
        <tr>
					<td align="center" colspan=4 class="editMainBottomTD">
					<font class="editCaptionTitle"> <a style="cursor:hand;TEXT-DECORATION: underline;" onclick="doClick('yglstyle')">查询条件列参数设置</a> </font></td>
				</tr>
      </table>
      <div id="yglstyle">
      <table border="0" align="center" cellpadding="0" cellspacing="0"
					class="editTableBorder" style="width:80%;">
        <tr>
          <td class="editMainLabelTD" >
            <div align="right">
              <span class="data1">所有列</span>
            </div>
          </td>
          <td class="editMainLabelTD" >
            <div align="center">
              <span class="data1"> </span>
            </div>
          </td>
          <td class="editMainLabelTD" >
            <div align="left">
              <span class="data1">查询条件列</span>
            </div>
          </td>
        </tr>
        <tr>

          <td class="editMainTD" width="45%" >
          <div align="right">
           <select id="yyqx" multiple="multiple" style="left:30px; width:auto;height: 200px;">

					<option value="XSLB">学生类别option>


					<option value="XH">学号</option>

					<option value="XM">姓名</option>


					<option value="XB">性别</option>

			</select>
			</div>
          </td>
          <td class="editMainLabelTD" width="10%">
            <div align="center"><center><input type="button" value=">" name="s1" onclick="chk1('yyqx','yyqx2');"><br>
			<input type="button" value="<" name="s2" onclick="chk2('yyqx2','yyqx');"><br>
			<input type="button" value=">>" name="s3" onclick="chk3('yyqx','yyqx2');"><br>
			<input type="button" value="<<" name="s4" onclick="chk4('yyqx2','yyqx');"></center></div>
          </td>
          <td class="editMainTD" width="45%">
           <select id="yyqx2"  name="searchNames" multiple="multiple" style=" left:30px; width:auto;height: 200px; ">


              <option value="CSRQ">出生日期</option>

			</select>	
          </td>
        </tr>
        <tr>
          <td class="editMainLabelTD" colspan="3">
            <div align="center">
              <input type="button" class="infoTopButton"    value=" 设 置 " onclick="getSearchIdList();"/>
            </div>
          </td>
        </tr>
      </table>
      </div>
      </form>
     </body>
</html>