文章源自:http://viralpatel.net/blogs/listbox-select-all-move-left-right-up-down-javascript/
Listbox options javascript select all,move left-right, move up-down
While working with Listboxes I had to write few small JavaScript snippets to perform certain tasks like selecting all options / seselecting all options or moving options up and down or swapping the options between two listboxes. I thought of sharing the JavaScript functions with you so that you can bookmark the article and use the code whenever you need them.
Listbox Select All / Deselect All JavaScript
Following is the JavaScript function for implementing select all, deselect all options in listbox.
function listbox_selectall(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) { listbox.options[count].selected = isSelect; } }
The above javascript code is very straight forward. All you have to do it to pass the ID of listbox you need to perform select all/deselect all and a boolean value for select/deselect.
For example if a listbox has an id “countryList” following can be the function call.
listbox_selectall('countryList', true); //select all the options listbox_selectall('countryList', false); //deselect all the options
Listbox Move up/down options JavaScript
Following is the javascript function that you can use to add move up/down options functionality. User can select any option and move it up in the list or down.
function listbox_move(listID, direction) { var listbox = document.getElementById(listID); var selIndex = listbox.selectedIndex; if(-1 == selIndex) { alert("Please select an option to move."); return; } var increment = -1; if(direction == 'up') increment = -1; else increment = 1; if((selIndex + increment) < 0 || (selIndex + increment) > (listbox.options.length-1)) { return; } var selValue = listbox.options[selIndex].value; var selText = listbox.options[selIndex].text; listbox.options[selIndex].value = listbox.options[selIndex + increment].value listbox.options[selIndex].text = listbox.options[selIndex + increment].text listbox.options[selIndex + increment].value = selValue; listbox.options[selIndex + increment].text = selText; listbox.selectedIndex = selIndex + increment; }
Thus, you can call this function with first argument as list id and second argument a string value ‘up’ or ‘down’ depending on where you want to move the selected option.
listbox_move('countryList', 'up'); //move up the selected option listbox_move('countryList', 'down'); //move down the selected option
Listbox swap/move left-right options JavaScript
Following is the javascript code for moving selected options from one listbox to another.
function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getElementById(destID); for(var count=0; count < src.options.length; count++) { if(src.options[count].selected == true) { var option = src.options[count]; var newOption = document.createElement("option"); newOption.value = option.value; newOption.text = option.text; newOption.selected = true; try { dest.add(newOption, null); //Standard src.remove(count, null); }catch(error) { dest.add(newOption); // IE only src.remove(count); } count--; } } }
Just call the function with two arguments, first is the source listbox id and second is the destination listbox id.
listbox_moveacross('countryList', 'selectedCountryList');
相关推荐
Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件,它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景,用户可以轻松地进行批量选择...
本教程将深入讲解其中的几个关键组件,包括Frame、LabelFrame以及Listbox,这些组件在创建复杂且有组织的界面时扮演着重要角色。 首先,我们来看Frame组件。Frame是一个容器组件,它可以用来组织和布局其他组件,...
ListboxSortable for Laravel-admin 1.6+ListboxSortable...RequireLaravel-admin >= 1.6Installation运行下面的命令安装:"composer require ckhan/laravel-admin-listbox-sortable"然后,运行下面的命令发布静态文件:...
天轰穿系列教程之-44列表框ListBox 天轰穿系列教程之-44列表框ListBox 天轰穿系列教程之-44列表框ListBox 天轰穿系列教程之-44列表框ListBox 天轰穿系列教程之-44列表框ListBox 天轰穿系列教程之-44列表框ListBox 天...
这个"Easy-multicolumn-listbox-8.6.zip"文件提供了一个关于如何在LabVIEW中有效使用多列列表控件的示例程序。这个例子对于初学者和经验丰富的开发者来说都是一个很好的学习资源,它涵盖了多种操作,包括数据填充、...
在IT领域,动态创建下拉列表(如ComboBox、ListBox或Dropdown)是常见的需求,尤其是在网页交互设计中。本文将深入探讨如何使用JavaScript实现这样的功能,同时结合提供的`demo.html`文件进行实例解析。 动态创建...
" ListBox拖拽功能实现" ListBox控件是Windows Forms应用程序中的一种常见控件,它能够显示一组项目,并允许用户进行选择和拖拽操作。实现ListBox控件的拖拽功能,可以使用户更方便地在不同的ListBox控件之间移动...
在Windows Presentation Foundation (WPF) 中,`ListBox`控件是一种常用的数据展示组件,它可以用来显示一系列可选择的项。本篇文章将详细讲解如何在`ListBox`中实现拖拽排序功能,以及背后的实现原理。 首先,`...
在使用`bootstrap-duallistbox-master`压缩包时,通常包含以下文件和目录: 1. `dist`目录:包含编译后的CSS和JavaScript文件,如`bootstrap-duallistbox.css`和`bootstrap-duallistbox.js`,它们是插件的核心代码...
**WPF MVVM ListBox up&down demo** 在WPF(Windows Presentation Foundation)中,MVVM(Model-View-ViewModel)是一种广泛采用的设计模式,它分离了用户界面(UI)和业务逻辑,使得代码更加可测试、可维护。在这...
} else if (direction === 'down' && selectedIndex < listBox.options.length - 1) { listBox.remove(selectedIndex); listBox.add(selectedItem, selectedIndex + 1); listBox.selectedIndex = selectedIndex ...
本教程将深入探讨如何使用C#和JavaScript技术实现ListBox组件中项的左右移动功能,旨在提高用户体验并实现动态数据操作。 首先,`ListBox`是.NET Framework中的一种控件,常用于在Web应用程序中展示可多选的数据...
对偶列表框 ... node_modules/react-dual-listbox/src/less/react-dual-listbox.less node_modules/react-dual-listbox/src/scss/react-dual-listbox.scss 在样式表中包含以下文件之一,或使用CSS
根据提供的文件信息,我们可以深入探讨JavaScript操作`<select>`元素(通常称为listbox或下拉列表)的方法。这里的关键知识点包括获取选中的值、全选、全删、单选、单删等操作。 ### 一、获取Listbox的选中值 在...
在C#和JavaScript中,处理ListBox控件是构建交互式应用程序的重要环节。下面将详细介绍如何在C#和JavaScript中操作ListBox控件,并提供相关知识点。 **C#中的ListBox控件** 在C#中,ListBox主要应用于ASP.NET Web ...
在JavaScript中,删除ListBox(多选列表框)中的多个值是一项常见的操作,特别是在处理用户交互或动态更新数据时。ListBox控件允许用户选择一个或多个选项,而删除这些选定值通常涉及遍历列表并移除匹配项。这篇博客...
### 知识点一:ListBox 控件的基本概念与使用 #### 定义: - `ListBox` 是一种在 Windows 应用程序中常见的控件类型,主要用于显示一系列选项供用户选择。 - 在图形用户界面(GUI)开发中,`ListBox` 控件能够存储...
本文将详细介绍如何通过JavaScript在用户双击列表项时实现移除`Listbox`选项的功能,并且做到无刷新页面。 #### 技术背景 - **服务器控件**:ASP.NET提供了多种服务器端控件,包括`Listbox`。这些控件可以绑定到...
在JavaScript编程领域,Listbox和TreeView是两种常用的用户界面(UI)控件,它们用于提供交互式的列表和树形结构数据展示。这次的更新聚焦于这两个控件的功能增强,特别是针对选择机制的优化。 首先,让我们详细...
### ListBox控件用法详解:实现数据在两个ListBox间的多条移动 #### 一、概述 在.NET框架中,ListBox是一种常用的用户界面组件,用于显示一个项目列表供用户选择。ListBox支持多种选择模式,其中“Multiple”模式...