<html>
<head>
<script type="text/javascript">
function listboxMoveacross(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--;
}
}
}
</script>
</head>
<table>
<tbody>
<tr>
<td>
<select id="sourceSelect" size="10" multiple="multiple">
<option value="a">Afghanistan</option>
<option value="b">Bahamas</option>
<option value="d">Belgium</option>
<option value="e">Bhutan</option>
<option value="f">China</option>
<option value="g">Croatia</option>
<option value="h">Denmark</option>
<option value="i">France</option>
<option value="c">Barbados</option></select>
</td>
<td>
<button onclick="listboxMoveacross('sourceSelect', 'destSelect');">>></button> <br>
<button onclick="listboxMoveacross('destSelect', 'sourceSelect');"><<</button>
</td>
<td>
<select id="destSelect" size="10" multiple="multiple">
<option value="a">Afghanistan</option>
<option value="b">Bahamas</option>
<option value="c">Barbados</option>
<option value="d">Belgium</option>
<option value="e">Bhutan</option>
<option value="f">China</option>
<option value="g">Croatia</option>
<option value="h">Denmark</option>
<option value="i">France</option>
</select>
</td>
</tr>
</tbody></table>
</html>
分享到：
相关推荐
总结起来，实现"C#js实现ListBox左右移动"的功能，需要结合C#后端处理与JavaScript前端交互。C#用于处理服务器端的数据操作，而JavaScript则负责客户端的实时反馈，提供无缝的用户体验。在实际的Web开发过程中，这样...
本文实例讲解了javascript实现listbox左右移动的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=gb...
根据提供的文件信息，我们可以深入探讨JavaScript操作`<select>`元素（通常称为listbox或下拉列表）的方法。这里的关键知识点包括获取选中的值、全选、全删、单选、单删等操作。 ### 一、获取Listbox的选中值 在...
1。 html部分： 代码如下: ”0″ borderColorDark=”#ffffff” cellPadding=”3″ width=”460″ align=”left” borderColorLight=”#000000″ border=...runat=”server”> </td> <td align=”center” width=”6
【ASP.NET + AJAX + C# 实现的左右ListBox互选操作控件】 在Web开发中，用户界面的交互性是提升用户体验的关键因素之一。ASP.NET框架提供了丰富的服务器控件，如ListBox，使得开发者能够轻松创建复杂的用户交互。在...
- 引入依赖：首先需要引入jQuery库、Bootstrap CSS和JavaScript，以及Bootstrap Dual Listbox的CSS和JS文件。 - HTML结构：创建一个带有多个`<option>`的`<select>`元素，给它添加一个特殊的类（如"class='select ...
- `friend.js`是项目的JavaScript源代码，其中包含了实现左右列表框功能的具体逻辑，如监听事件、移动项目和更新界面状态等。 - `friend_selector.png`很可能是一个图像文件，用于增强界面的视觉效果，比如作为列表...
在本文中，我们将深入探讨如何在ListBox中动态地添加、删除数据，以及实现项目的上移和下移功能，所有这些操作都在无刷新的情况下进行，提供流畅的用户体验。 1. 动态添加数据： 在Windows Forms或Web应用中，可以...
本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法。分享给大家供大家参考。具体分析如下： 这段JS代码可以控制listbox内的元素向上或者向下移动，这个功能非常有用。下面是详细的代码 代码如下:...
首先，确保引入了jQuery库和Bootstrap的相关CSS及JS文件，然后在页面中添加多选框元素，并赋予特定的class（通常为`duallistbox`）。接着，通过JavaScript调用`$.fn.dualListbox`方法初始化插件。例如： ```html ...
ListBox通常用于提供多选选项，用户可以通过按钮或拖动操作在左右两个ListBox之间移动选项。在这个场景下，我们将探讨如何使用纯JavaScript来实现这样的功能。 首先，我们需要理解ListBox的基本结构。在HTML中，...
本文主要讲述了利用JavaScript和jQuery来实现ListBox中选项的上下左右移动排序功能。这样的功能对于需要用户自定义选项顺序的场景非常有用，例如在配置界面中用户可以根据自己的偏好对列表项进行排序。 在实现这样...
`bootstrap-duallistbox`可能是bootstrapDualListbox插件的文件，它可能包含CSS和JavaScript文件，如`bootstrap-duallistbox.min.css`和`bootstrap-duallistbox.min.js`。这个插件通常会扩展Bootstrap的`...
总结来说，JavaScript的`listbox_moveacross`函数实现了在两个列表框之间移动被选中选项的功能，适用于需要用户交互选择并转移数据的场景，如设置选择、多选过滤等。这个功能的实现依赖于对DOM操作的深入理解，包括...
在JavaScript中，删除ListBox（多选列表框）中的多个值是一项常见的操作，特别是在处理用户交互或动态更新数据时。ListBox控件允许用户选择一个或多个选项，而删除这些选定值通常涉及遍历列表并移除匹配项。这篇博客...
本示例是一个基于纯JavaScript实现的Dubal ListBox操作程序，它不依赖任何外部库，如jQuery或其他框架，这使得它具有轻量级和高度自定义的特点。 首先，我们来看`sample_select_list.htm`和`sample_list_test.htm`...