`
canofy
  • 浏览: 831479 次
  • 性别: Icon_minigender_1
  • 来自: 北京、四川
社区版块
存档分类
最新评论

select的multiple属性的应用

    博客分类:
  • j2EE
阅读更多
function srcToDest(srcid,destid){ 
	     var optionsObjects=document.getElementById(srcid);  
	     var optionsSubObjects=document.getElementById(destid);
	      
	     for(var o=0;o<optionsObjects.length;o++) { 	     	  
		 	if(optionsObjects.options[o].selected==true)  { 
		 	//获取源的value值和text值
			     var optionsvalue=optionsObjects.options[o].value;  
			     var optionstext=optionsObjects.options[o].text; 			     
			     addoptions(destid,optionstext,optionsvalue)  
		      }  
	     }  
       }         
         
       //向目标  
	 function addoptions(objectid,textvalue,optionsvalue){  
		 var optionsSubObjects=document.getElementById(objectid);  
		 var hasexist=0;  
		 for(var o=0;o<optionsSubObjects.length;o++){		 	  
			  var optionsvalue_sub=optionsSubObjects.options[o].text;  
			  if(optionsvalue_sub==textvalue)  hasexist+=1;  
		 } 
		 var  Browser_Name=navigator.appName;
		 
		 
		 if(hasexist==0) {  
		 	//optionsSubObjects.add(new Option(textvalue, optionsvalue)); 
		 	if(Browser_Name=='Netscape'){
		 		optionsSubObjects.add(new Option(textvalue, optionsvalue),null); 
			 }else{
			 	optionsSubObjects.add(new Option(textvalue, optionsvalue));
			 }	 		
		  	
		 } 
		 for(i=0;i<optionsSubObjects.length;i++){  
             optionsSubObjects.options[i].selected=true;  
  		 }
		     
	 } 
   
	 //将对象中所选的项删除 
	 function destToSrc(objectid)  {  
	 	var optionsObjects=document.getElementById(objectid);
		 for(var o=0;o<optionsObjects.length;o++)  {  
				 if(optionsObjects.options[o].selected==true)  {  
				    var optionsvalue=optionsObjects.options[o].value;  
				    var optionstext=optionsObjects.options[o].text;  
		       			removeoption(objectid,optionstext,optionsvalue)  
		  		}  
	 	}  
	 }  
   
	 //删除单个选项  
	 function removeoption(objectid,textvalue,optionsvalue)  {  
	 	var optionsSubObjects=document.getElementById(objectid);  
		 for(var o=0;o<optionsSubObjects.length;o++) {  
			  var optionsvalue_sub=optionsSubObjects.options[o].text;  
			  if(optionsvalue_sub==textvalue)  
			        optionsSubObjects.removeChild(optionsSubObjects.options[o]);
		 	}  
	 }  
	 
	 
	 
	 
	      
	     // 全选的js
	      
	      var allcheck=false;
			 function checkall(){   //批量操作(选取) 
			  	var all=document.getElementsByTagName("input");
			  	 for(var i=0;i<all.length;i++){
			  			if(all[i].type=="checkbox")	all[i].checked=!allcheck;
			  	 }
			  	allcheck=!allcheck;
			  }

HashMap在页面中的判断
  <td>	
   <select multiple="multiple" size="15" style="width=200px" id="source"> 
		         <option value="1">aaaa</option>  	         
	         	<option value="2">bbbb</option>  	 
	         	<option value="3">cccc</option>  	 
	         	<option value="4">dddd</option>  	 
	        </select>
    	
    	<input type="button" value=" &gt;&gt; "  onclick="javascript:srcToDest('source','target')">     
        <input type="button"  value=" &lt;&lt; " onclick="javascript:destToSrc('target')">  
   		<select multiple="multiple" size="15" style="width=200px" id="target" name="target"></td>


   		<td>操作系统</td>
	      <td><input type="checkbox" value="全部" onclick="checkall1('os');"/>全部<br/>
	      	  <c:forEach items="${osList}" var="result" varStatus="recordCount">
	      	  	<input type="checkbox" name="os" value="${result.id}" 	<c:if test="${osMap[result.id]!=null }">checked</c:if> />${result.operationId}
	      	  	<c:if test="${recordCount.count==5}"><br /></c:if>	      	  
	      	  </c:forEach>
	      </td>
分享到:
评论

相关推荐

    select标签multiple属性的使用方法.zip

    总的来说,`&lt;select&gt;`标签的`multiple`属性是创建多选下拉列表的强大工具,它提供了简洁的用户界面,同时允许用户方便地选择多个选项。在实际应用中,结合CSS样式和JavaScript交互,可以打造出功能丰富的多选下拉...

    layui多选下拉框样式,整套layui-select-multiple

    综上所述,Layui的“layui-select-multiple”提供了一整套美观且功能丰富的多选下拉框解决方案,适合HTML5项目,能够帮助开发者快速构建具有出色用户体验的Web应用。其样式可定制,组件API易用,使得在网页中实现...

    multiple-select-master

    下面将详细讲解 `multiple` 属性的使用方法、相关的HTML和JavaScript知识点,以及如何在实际项目中应用。 1. **`multiple` 属性的使用** 在 `&lt;select&gt;` 标签中添加 `multiple` 属性,可以使用户能够同时选择多个...

    下拉多选select multiple

    在网页设计和开发中,"下拉多选select multiple"是一种常见的交互元素,它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能,同时增强了用户体验,尤其是在数据量较大时...

    zhuyongzhengs-layui-select-multiple-master.zip

    本项目“zhuyongzhengs-layui-select-multiple-master.zip”专注于layui框架下实现下拉框select组件的多选功能,并能获取选定值,这对于构建具有交互性用户界面的应用程序非常有用。 layui的select组件是其表单元素...

    select多选 multiple的使用示例

    本示例主要讲解如何使用`&lt;select&gt;`的`multiple`属性创建一个多选下拉框,并通过JavaScript来处理用户的选择。 首先,`&lt;select&gt;`标签的`multiple`属性是关键,它告诉浏览器该下拉列表支持多选。例如: ```html ...

    Select Multiple Values from Combobox Using JavaScript.zip

    在网页中,这种功能通常通过HTML的`&lt;select&gt;`元素配合`multiple`属性来实现,然后用JavaScript进行操作和控制。 首先,HTML的`&lt;select&gt;`标签用于创建下拉列表,添加`multiple`属性则允许用户选择多个选项。例如: ...

    html中select的属性.pdf

    HTML 中 Select 元素的属性大全 在 HTML 中,Select 元素是一个基本但非常重要的控件,它允许用户从预定义的选项...Select 元素的属性非常丰富,开发者可以根据需要选择合适的属性来控制 Select 元素的行为和样式。

    重构《实现select multiple左右添加和删除功能》

    在传统的HTML `&lt;select&gt;`元素中,`multiple`属性允许用户选择多个选项。然而,这种基本的实现方式通常缺乏直观的交互设计,比如将已选的项移动到另一个区域或反之。这个重构项目旨在解决这个问题,为用户提供更好的...

    select 下拉框可以多选

    首先,要实现`select`下拉框的多选功能,我们需要在`&lt;select&gt;`标签中添加一个`multiple`属性。这个属性告诉浏览器用户可以选取多个值。下面是一个基本的多选`select`下拉框的HTML结构示例: ```html &lt;select ...

    input+select(multiple) 实现下拉框输入值

    在`select`元素中添加`multiple`属性可以让用户同时选择多个选项。 在描述中提到的方法是将一个`input`元素置于`select`元素之上,这样用户既可以输入文字,也可以点击下拉框选择已有选项。然而,当使用异步方式...

    下拉框(select),可以多选,带有分组搜索功能

    在前端框架中,例如React、Vue或Angular,可以通过设置`multiple`属性来启用这一功能。 2. **分组功能**:为了更好地组织和呈现大量选项,下拉框可以按类别或分组显示。每个分组有自己的标题,帮助用户快速定位和...

    js之Select用法

    在`select`标签中添加`multiple`属性,可以创建一个允许多选的下拉菜单。此时,`selectedIndex`会返回一个数组,`value`则会返回一个包含所有选中值的数组。 6. **禁用或启用`select`元素** 使用`disabled`属性...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    对于不希望引入额外库或使用JavaScript的场景,可以尝试调整`&lt;select&gt;`元素的`width`属性。但是,这通常只能解决简单的情况,对于复杂的需求,如动态内容或多列布局,这种方法可能不够灵活。 在文章中,作者Jyao...

    select里实现checkbox选择和input里边实现上下一条

    然而,如果需要实现多选功能,我们可以使用`&lt;select multiple&gt;`属性。这个属性使得用户可以在下拉框中选择多个选项,模拟复选框的效果。例如: ```html &lt;select multiple&gt; &lt;option value="option1"&gt;Option 1 ...

    layui的select下拉框插件,可以多选

    同时,为了开启多选功能,我们需要添加`multiple`属性。下面是一个基本示例: ```html &lt;select id="exampleSelect" lay-filter="exampleFilter" multiple&gt; 选项1 选项2 选项3 &lt;/select&gt; ``` 接下来,我们可以...

    jquery select2组件

    - **多选**:通过设置`multiple`属性,`Select2`可以支持多选模式。 - **自定义数据源**:除了绑定HTML `&lt;option&gt;`元素,`Select2`还能从JSON或其他数据源动态加载选项。 - **分组选项**:通过在`&lt;optgroup&gt;`标签内...

Global site tag (gtag.js) - Google Analytics