`
miaoge
  • 浏览: 109307 次
  • 性别: Icon_minigender_1
  • 来自: 嘉兴
社区版块
存档分类

JavaScript全选代码,批量删除,select标签把左边的数据添加到右边关键代码

阅读更多

全选JS代码

<script language="javascript" type="text/javascript">
function checkAll()
{
 var obj = document.getElementById("all");
 var arr = document.getElementsByName("dels");
 for(var i = 0; i < arr.length; i++)
 {
  arr[i].checked = obj.checked;
 }
}
</script>

 

全选按钮标签

<input type="checkbox" name="checkbox" id="all" value="checkbox" onClick="checkAll()">

 

复选框标签

<input name="dels" type="checkbox" id="dels" value="${id}">

 

主要用来批量删除上面那id是 要删除数据的id,这里传Action层去的是一个存放id的数组,所以Action层要用String[] dels = request.getParameterValues("dels")来接收

 

 

select标签把左边的数据添加到右边:

 

function move(a,b)

 var s=document.getElementById(a);
 var t=document.getElementById(b);
 for(var i=0;i<s.length;i++)
 {
   if(s[i].selected)
   {
      var op=new Option(s[i].text);
      op.value=s[i].value;
      s.remove(i);
      t.add(op);
   i--;
    }
 }
}

 

在jsp页面调用:

<select name="select" size="15" id="left" multiple="multiple">
           <s:iterator value="popedomList">
                  <option value="${id}">${popedom}</option>
            </s:iterator>
  </select>

 

<select name="role_Dto.popedomId" size="15" id="right" multiple="multiple">
</select>

 

<input type="button" name="Submit" value="添加 &gt;&gt;" onClick="move('left','right')">
<input type="button" name="Submit" value="&lt;&lt; 删除" onClick="move('right','left')">
      

 

 

  • 大小: 32.2 KB
分享到:
评论

相关推荐

    Javascript实现全选反选

    在JavaScript编程中,"全选反选"功能是常见的用户交互设计,常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目,极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

    JavaScript实现的全选效果与批量删除效果

    总结,JavaScript全选效果和批量删除功能的实现涉及DOM操作、事件监听、数据收集、用户交互确认以及与服务器的通信。理解并熟练运用这些技术对于提升网页的交互性和用户体验至关重要。在实际开发中,还需考虑到错误...

    checkbox全选反选与批量删除附源码

    在IT领域,尤其是在Web开发中,用户经常需要对列表中的多项数据进行操作,例如全选、反选和批量删除。这个场景通常涉及到前端交互和后端处理。在本例中,我们将探讨如何利用HTML的`checkbox`元素,JavaScript来实现...

    JS简单表格列表全选反选代码.zip

    这个功能在数据管理、表单处理等场景中十分常见,比如在批量操作数据时,用户可以通过全选按钮一次性选择所有行,或者通过反选取消部分选择。 首先,我们需要了解JavaScript中的DOM(Document Object Model)操作,...

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

    在实际应用中,全选功能常用于批量操作,如用户一次性勾选多个选项进行批量删除、导出等操作。 首先,我们需要了解`&lt;el-select&gt;`的基本用法。在Element-UI中,`&lt;el-select&gt;`组件用于创建一个下拉选择框,通过`...

    表格中全选按钮的使用以及删除功能的实现

    在页面上添加一个`&lt;input type="checkbox"&gt;`作为全选按钮,当用户点击该按钮时,通过JavaScript遍历所有行中的复选框(假设每个数据行都有一个对应的复选框),并设置它们的状态为选中。例如,你可以添加以下...

    js实现全选效果

    在JavaScript(JS)中,全选效果是一种常见的用户交互功能,尤其在网页表格或列表中。这个功能允许用户通过单击一个按钮或链接来选择所有可选项目,或者取消已选中的所有项。这里我们将详细探讨如何使用JavaScript...

    jQuery全选

    在实际的Web应用中,jQuery全选功能可以应用于各种场景,如电商网站的商品批量选择、表格数据的全选导出、用户管理界面的批量操作等。结合Ajax异步请求,还可以实现动态数据的全选与反选,提升用户体验。 五、拓展...

    js 全选/反选/删除选择等代码 (精华)

    在JavaScript编程中,全选、反选和删除选择等功能是网页交互中常见且重要的操作,尤其是在数据表或者多选项列表中。这些功能可以极大地提升用户体验,使得用户能够快速地进行批量操作。以下是对这些概念的详细说明:...

    javascript全选

    ### JavaScript全选功能详解 #### 一、引言 在Web开发中,表格或列表中的数据经常需要进行批量操作,例如批量删除、批量修改状态等。此时,全选功能便显得尤为重要。它不仅可以提高用户体验,还能简化前端逻辑,...

    GridView全选实现代码

    ### GridView全选功能实现 在Web开发中,尤其是在ASP.NET Web Forms中,处理表格数据时经常需要用到`GridView`控件。对于需要用户选择表格中某一行或多行数据的应用...或者在全选操作后触发其他事件,如批量删除等。

    购物车全选实现

    这个功能极大地简化了用户操作,尤其在用户需要对所有商品进行相同操作(如批量删除、批量修改属性或一次性结算)时非常有用。接下来,我们将深入探讨购物车全选实现的技术细节和实现方法。 首先,我们需要理解...

    无刷新-批量全选及操作

    - **代码实现**:`function SelectCheckBox(){ return $(":checkbox:checked:not(#chkAll)").map(function(){ return $(this).val(); }).get().join(","); }` - **功能描述**:此函数用于获取所有被选中的复选框...

    springmvc+mysql增删改查批量删除异步请求全选反选

    在进行多条记录的操作,如批量删除时,事务能够保证操作的原子性,即使在过程中发生错误,也能回滚到事务开始前的状态,避免数据不一致。 总结来说,这个项目涵盖了Spring MVC框架的Web开发基础,数据库操作,以及...

    表格的添加,全选,删除

    在这个主题中,我们将深入探讨如何使用JavaScript(JS)来实现HTML表格的添加、全选和删除功能。 一、HTML表格基础 HTML表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`表示表格行,`&lt;th&gt;`表示表头单元格,`&lt;td&gt;`则表示数据...

    Angular多选、全选、批量选择操作实例代码

    Angular 多选、全选、批量选择操作实例代码详解 Angular 中的列表批量选择是一个常见的功能,实现方式多种多样。下面我们将详细介绍 Angular 中多选、全选、批量选择的实现代码。 Angular 中的多选、全选、批量...

    js全选效果

    总结起来,JavaScript全选效果是通过监听主复选框的点击事件,然后遍历并更新所有子复选框的`checked`属性来实现的。在实际应用中,这个功能可以极大地提升用户体验,尤其是在需要批量操作的场景下。`权限2.htm`文件...

    解决ext下拉列表全选和去全选功能

    标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求,特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...

    jquery全选反选全不选案例

    这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和事件绑定。首先,我们需要一个复选框作为“全选”按钮,当用户点击这个按钮时,所有的子复选框会被选中或取消选中...

Global site tag (gtag.js) - Google Analytics