JavaScript控制两个列表框listbox左右交换数据的方法资源-CSDN文库

127 浏览量 2020-12-09 06:44:30 上传评论收藏 32KB PDF 举报

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下：这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动代码如下:function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getElementById(destID); for(var count=0; count < src.opt JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态内容。在HTML中，`<select>`元素用于创建下拉列表，也称为列表框。在某些情况下，我们可能需要实现两个列表框之间的数据交换功能，比如用户可以选择将一个列表中的项移动到另一个列表。本文介绍的`listbox_moveacross`函数就是一个实现这种功能的JavaScript方法。让我们详细解析`listbox_moveacross`函数的代码： ```javascript 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); // 标准兼容 src.remove(count, null); // 移除源列表框中的选项 } catch(error) { dest.add(newOption); // IE 兼容 src.remove(count); // 移除源列表框中的选项 } // 因为移除了选项，所以需要更新计数器 count--; } } } ``` 这个函数接受两个参数：`sourceID`和`destID`，分别代表源列表框和目标列表框的ID。通过`getElementById`方法获取这两个列表框的引用。然后，遍历源列表框的所有选项，检查哪些是被选中的。如果选项被选中，就创建一个新的`option`元素，并设置其值和文本与源选项相同。接着，尝试将新选项添加到目标列表框，并从源列表框中移除该选项。由于`add`方法在不同浏览器中可能存在兼容性问题，因此使用了`try...catch`结构来处理。为了防止因为移除选项而跳过下一个未处理的选项，我们需要减小计数器`count`。为了展示这个功能，通常会有一个HTML页面，包含两个列表框（`<select>`元素）以及两个按钮，一个用于向右移动选中的选项，一个用于向左移动。当用户点击按钮时，调用`listbox_moveacross`函数，传入相应列表框的ID。例如，以下是一个简单的HTML示例： ```html <!DOCTYPE html> <html> <head> <title>列表框数据交换</title> <script src="script.js"></script> </head> <body> <table> <tbody> <tr> <td> <select id="sourceSelect" size="10" multiple="">  </select> </td> <td> <button onclick="listbox_moveacross('sourceSelect', 'destSelect');">>>></button> <br> <button onclick="listbox_moveacross('destSelect', 'sourceSelect');"><<<</button> </td> <td> <select id="destSelect" size="10" multiple="">  </select> </td> </tr> </tbody> </table> </body> </html> ``` 在这个例子中，`script.js`文件应该包含了`listbox_moveacross`函数。列表框中的选项可以通过`<option>`元素添加，每个`<option>`元素的`value`属性表示选项的值，`text`表示显示的文本。总结来说，JavaScript的`listbox_moveacross`函数实现了在两个列表框之间移动被选中选项的功能，适用于需要用户交互选择并转移数据的场景，如设置选择、多选过滤等。这个功能的实现依赖于对DOM操作的深入理解，包括创建新的DOM元素、获取和设置元素属性，以及处理浏览器兼容性问题。

资源详情

资源评论

资源推荐

JavaScript控制两个列表框控制两个列表框listbox左右交换数据的方法左右交换数据的方法

本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法。分享给大家供大家参考。具体分析如下：

这个功能我们经常用到，将左边列表框的元素移动到右边，或者将右边列表框的元素移动到左边，可以一次性全部移动

代码如下: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–;

}

//..

listbox_moveacross(‘countryList’, ‘selectedCountryList’);

下面是像是的演示效果代码，可以直接在浏览器内执行

代码如下:Click below buttons to move selected options right or left.<br>

<table>

<td>

<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>

<td>

</td>

<td>

<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>

function listboxMoveacross(sourceID, destID) {

var src = document.getElementById(sourceID);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38748718

粉丝: 6
资源: 912

JavaScript控制两个列表框listbox左右交换数据的方法

评论0

最新资源

JavaScript控制两个列表框listbox左右交换数据的方法

评论0

实现两个listBox控件之间传递数据.sln

基于纯js是实现的能够在上下两个列表框及数据项位置移动的程序代码

VS2010写的两个Listbox控件多选相互移动和删除

JavaScript如何实现组合列表框中元素移动效果

vc中双击一个列表框（listbox）某一选项，将选项移到另一个列表框中

JavaScript控制listbox列表框的项目上下移动的方法

基于javascript实现listbox左右移动

javascript实现listbox左右移动实现代码

JavaScript ListBox控件

vc CListBox左右两个列表框互相交换数据.rar

左右两个ListBox互相交换数据VC++版

MFC实现的多选的列表框ListBox

仿腾讯左右列表框listbox

实现ListBox控件与ListBox控件交换数据

Multicolumn Listbox.zip_labview列表框_labview多列框_listbox 多列_multi

使两个列表框选项同步

天轰穿系列教程之-44列表框ListBox

一个Delphi新手写的ListBox左右交换内容例子..rar

listbox数据交换(VB)

vc 列表框 listbox 水平滚动条的增加

ListBox实现上下左右移动

一个可以左右交换数据的VB ListBox控件.rar

VC 列表框 拖拽

VC ListBox左右交换选择数据.rar

VC 6.0 适时添加ListBox列表框数据.rar

LabVIEWLV控制列表框、设置表格颜色.rar

在ListBox控件间实现数据交换

易语言超级列表框数据保存

最新资源

VC 列表框拖拽