window.onload=function(){
//moveOneToRight为网页中某个按钮的ID,menuList和roleMenuList为两个下拉框
$("#moveOneToRight").click(function(){
var menuList = $("#menuList");
var roleMenuList = $("#roleMenuList");
moveSelect(menuList,roleMenuList,true);
});
}
/**
* 两个下拉框的多选操作函数
* @param {} startSelect 起点下拉框
* @param {} endSelect 终点下拉框
* @param {} model true多选移动 false全部移动
*/
function moveSelect(startSelect,endSelect,model){
var options = null;
if(model){
options = startSelect.find("option:selected");
}else{
options = startSelect.children();
}
if(options.length == 0){
alert("请选择一个选项!");
return;
}
options.each(function(){
var val = $(this).val();
var txt = $(this).text();
//检查一下这个值是否已经保存过去了
var flag = false;
endSelect.children().each(function(){
if(val == $(this).val()){
flag = true;
}
});
//根据是否找到了该元素决定是否将选项添加过去
if(flag == false){
endSelect.append("<option value='"+val+"'>"+txt+"</option>");
}
});
//添加完毕后这边删除
options.remove();
}
分享到:
相关推荐
在本示例中,我们探讨的是如何使用jQuery来实现一个功能,允许用户在两个多选框之间移动选项,即从左侧的多选框选择选项并将其添加到右侧,或者从右侧的多选框中移除选项并返回左侧。这个功能在需要用户分配或管理...
7. **代码组织**:为了保持代码整洁,可以将复选框移动逻辑封装成一个函数,然后在事件处理中调用。这样,代码更易于维护和扩展。 综上所述,"复选框的左右移动"是通过jQuery实现的一种高效权限管理方式。它结合了...
8. **无障碍性**:对于视障用户,确保每个多选框都有清晰的标签和描述非常重要。`aria-label`或`aria-labelledby`属性可以增强可访问性。 9. **响应式设计**:在移动设备上,多选框可能需要重新布局或使用更友好的...
在实际应用中,你可能需要遍历多个复选框,例如: ```javascript $('input[type=checkbox]').each(function() { var checkboxId = this.id; var isChecked = this.checked; var checkboxValue = isChecked ? ...
1. **HTML结构**:HTML部分通常包括两个`<ul>`或`<ol>`列表(分别代表左侧未选和右侧已选的元素),以及两个按钮,一个用于将元素从左侧移动到右侧,另一个则相反。每个列表项通常包裹在一个`<li>`标签中,并可能...
在Bootstrap中,下拉多选框是实现用户界面交互时常见的一种元素,尤其在数据筛选、选项选择等场景下非常实用。Bootstrap本身并没有内置专门的多选下拉框组件,但通过扩展或第三方插件,我们可以轻松地实现这一功能。...
总的来说,"jQuery点击弹出下拉复选框代码.zip"提供的示例代码涉及了前端开发的多个关键领域,包括DOM操作、事件处理、CSS样式设计以及用户体验优化。通过学习和理解这段代码,开发者可以提升自己的前端技能,更好地...
在描述中提到的"双列表数据删选",是一种常见的用户界面设计模式,用于帮助用户在两个相关的列表之间进行选择和过滤。这种设计通常应用于需要用户从一组候选值中挑选并定制他们想要的结果集的场景,如分配角色、选择...
首先,我们需要在 HTML 页面中创建两个 select 元素,分别表示左侧和右侧的选择框: ```html <!DOCTYPE html> <title>jQuery Select 移动示例 <script src="https://code.jquery....
本文将深入探讨如何使用jQuery实现一个类似Struts2中的`optiontransferselect`标签的功能,即在两个下拉框之间进行选项的互选和上下移动。 首先,我们需要了解`optiontransferselect`的基本概念。在Struts2框架中,...
首先,双向选择列表框通常由两个列表组成:一个表示待选选项,另一个显示已选选项。用户可以通过单击或双击在两个列表之间移动项,从而实现数据的双向同步。这种设计常见于需要用户从多个选项中做出选择的场景,如...
本文主要讲解了如何使用jQuery库中的appendTo()方法来实现两个下拉框之间选项的左右移动。这个操作能够让用户从一个下拉框中选择选项并移动到另一个下拉框,或者反过来,从另一个下拉框中选取所有选项移动到第一个...
首先,我们需要理解拖拽(Drag)和选择(Selection)这两个概念。拖拽通常涉及到元素的移动,而选择则是在用户界面中选定一块连续或非连续的区域。在本例中,我们将结合两者,创建一个允许用户通过鼠标左键拖动来...
"jQuery左右文字双向列表选择器插件"是一个高效且功能丰富的工具,它为开发者提供了创建左右两个列表之间进行数据双向选择的便捷方式。这种插件尤其适用于需要用户在多个选项中进行对比和选择的场景,比如设置、配置...
标题中的“Jquery多选框互相内容交换的实例代码”是指使用jQuery库来实现两个多选框(`<select>`元素)之间的内容交互。在这个示例中,用户可以通过点击按钮将一个或多选框中的选定选项移动到另一个多选框,或者将...
传统的多选列表通常由一个`<select>`元素组成,用户通过复选框来选择多个选项。然而,这个项目改进了这种模式,使得用户可以选择并将信息从左侧列表移动到右侧,从而创建了一个更直观的界面,方便用户进行信息筛选和...
这个组件通常被称为“选择器”或者“选择框”,它允许用户在两个列表之间移动项目,例如在“可用”和“已选”之间进行切换。这种效果常用于设置界面或者配置选项中,方便用户对多项内容进行选择。 jQuery是一个广泛...
5. `rgbmultiselect-1.1.1.js` 和 `rgbmultiselect-1.1.1.min.js`:这两个文件很可能是一个名为RgbMultiSelect的jQuery插件,专门用于创建具有向上移动选中项功能的下拉复选框。 6. `很好的jquery网址.txt`:这个...
这个资源包含了多套jQuery Mobile模板,它们是预先设计好的界面布局,可以帮助初学者快速入门。每套模板都展示了不同的设计风格和功能组合,比如: 1. **基础模板**:包含最简单的页面结构,适合学习jQuery Mobile...