`
zpball
  • 浏览: 917160 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

J#MicrosoftHTML 
阅读更多 

<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="&lt;" name="s2" onclick="chk2('yyqx2','yyqx');"><br>
			<input type="button" value=">>" name="s3" onclick="chk3('yyqx','yyqx2');"><br>
			<input type="button" value="&lt;&lt;" 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>
分享到：
| MyEclipse优化技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    下拉列表多选2

    1. **HTML Select 多选**：在HTML中，`&lt;select&gt;` 元素配合 `multiple` 属性可以创建一个多选下拉列表。用户可以通过按住Ctrl键（在Windows上）或Command键（在Mac上）来选择多个选项。 2. **JavaScript/ jQuery ...

    vue表单绑定实现多选框和下拉列表的实例

    在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现： 测试多选渲染： &lt;input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...

    jquery 多选下拉框实例

    - 在HTML中，`&lt;select&gt;`元素通常用于创建单选的下拉列表，通过设置`&lt;select&gt;`的`multiple`属性，可以使其变为多选模式。例如： ```html &lt;select multiple&gt; &lt;option&gt;Option 1 &lt;option&gt;Option 2 ... &lt;/select&gt; ...

    Element-ui中 选择器（select）多选下拉框实现全选功能.zip

    在Element-UI中，`&lt;el-select&gt;`组件用于创建一个下拉选择框，通过`multiple`属性可以将其设置为多选模式。以下是一个基本的多选下拉框示例： ```html &lt;el-select v-model="value" multiple placeholder="请选择"&gt; ...

    .net中实现多选下拉菜单（很容易学懂）

    在.NET框架中，多选下拉菜单通常通过`ASP.NET`的`ListBox`控件或者`HTML`的`&lt;select&gt;`元素配合`multiple`属性来实现。本教程将引导初学者理解如何创建并使用这样的多选下拉菜单，让你轻松掌握这一功能。 一、ASP...

    下拉多选菜单jquery代码

    `&lt;select&gt;`元素定义了一个下拉列表，而`&lt;option&gt;`元素则表示列表中的各个选项。要实现多选功能，我们需要设置`&lt;select&gt;`元素的`multiple`属性。 接下来，我们将利用jQuery来增强这个基本的下拉菜单。首先，需要在...

    多選下拉列表框

    1. HTML与JavaScript：在Web开发中，多选下拉列表通常通过HTML `&lt;select&gt;` 元素配合 `multiple` 属性来创建。例如： ```html &lt;select multiple&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;...

    select下拉菜单美化demo

    7. **多选支持**：有些情况下，`&lt;select&gt;`需要支持多选功能，此时`&lt;select multiple&gt;`属性会被使用。在美化时，需要考虑如何优雅地显示和管理多个选中的选项。 在`readme.md`文件中，通常会包含关于Demo的介绍、...

    JS 获取select(多选下拉)中所选值的示例代码

    在 `&lt;select&gt;` 标签内，每个 `&lt;option&gt;` 标签代表下拉列表中的一个选项。`value` 属性存储选项的值，而选项的内容则是显示在下拉框中供用户选择的文本。通过设置 `selected` 属性，可以预设某个选项为选中状态。 2....

    组合element里面的select和tree实现的treeSelect选择器

    在`SelectTree`中，我们可以设置不同的选择模式，比如单选（single selection）或多选（multiple selection），并且在选中后可配置自动关闭下拉菜单，提高用户体验。 实现这样的组件通常需要以下步骤： 1. **创建...

    jquery下拉列表树

    《jQuery下拉列表树详解及应用》 在Web开发中，下拉列表是常见的交互元素，用于提供用户选择项的菜单。然而，传统的下拉列表往往只能展示一级选项，对于层级结构复杂的数据，如部门结构、地区分类等，就显得...

    JS控制下拉列表左右选择实例代码

    具体来说，我们可以使用`ondblclick`事件监听用户的双击操作，同时在下拉列表中添加`multiple="multiple"`属性，使得用户可以多选选项。 下面是一个简单的代码实现示例： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;&lt;/...

    JS实现支持多选的遍历下拉列表代码

    首先，要创建一个多选的下拉列表，需要在select元素中加入multiple属性。该属性能够使得下拉列表允许多项的选择，用户可以使用鼠标点击或者按下Ctrl键的同时进行多项选择。此外，通过size属性可以设置下拉列表显示的...

    jQuery树形插件下拉列表选择框

    在jQuery中，可以使用`&lt;select&gt;`元素和`&lt;option&gt;`元素来创建基础的下拉列表，但要实现树形结构，我们需要借助特定的插件。这类插件通常会将原本的下拉列表扩展为具有层级和可展开/折叠特性的组件。 "选择框"在这里...

    自定义多选下拉框标签

    例如，在本案例中的“自定义多选下拉框标签”，我们可以创建一个名为`&lt;multi-select&gt;`的标签，用于替代传统的`&lt;select&gt;`元素，提供多选功能。 二、多选下拉框的实现原理 多选下拉框通常由一个输入框和一个可展开的...

    struts操作select标签实例

    最后，`html:select`标签还支持一些其他属性，如`multiple`（启用多选）、`size`（指定下拉列表的可见选项数）等，可以根据需求灵活使用。 总结，Struts中的`html:select`标签是构建用户界面下拉列表的关键工具。...

    jQuery实现的select下拉框多选菜单效果插件.zip

    传统的HTML `&lt;select&gt;` 元素在处理多选时，通常使用`&lt;option&gt;`标签，并通过`multiple`属性来启用多选模式。然而，这种原生方式在视觉效果和交互性上往往比较简陋。这个插件则通过jQuery提供了更美观、更易用的界面和...

    使用HTML开发商业网站-表单控件-select课件.pptx

    在众多的表单元素中，`&lt;select&gt;` 控件用于创建下拉列表，也就是我们常说的下拉菜单。这个控件常用于提供一系列预设的选项供用户选择，比如在注册页面上选择省份、城市或者在调查问卷中选择喜好。 **基本语法：** `...

    ySelect:jq版拖放框多选插件，扩展网络

    在网页开发中，当需要处理大量可选项目时，传统的多选框或下拉列表可能会显得拥挤且不易操作。ySelect通过引入拖放功能，使得用户可以更方便地进行多选操作，特别适用于需要用户自定义排序或选择列表的场景。 该...

Magicbox
Global site tag (gtag.js) - Google Analytics