<script type="text/javascript">
//选中的从左边移到右边
function toright() {
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//全部移动到右边
function allright(){
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstoptionElement[0]);//option选项选中时候索引为0
}
}
//双击移动到右边
function db(){
/* //方法一
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//方法二
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
secondElement.appendChild(firstElement[firstElement.selectedIndex]);
}
//获取右边框中的value值，以#号分隔
function getValues(){
var secondElement = document.getElementById("second");
var secondoptionElement = secondElement.getElementsByTagName("option");
var len = secondoptionElement.length;
var value = "";
for(var i=0;i<len;i++){
value += secondoptionElement[i].value + "#";
}
value = value.substring(0, value.length-1);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<table width="285" height="169" border="0" align="left">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>
</td>
<td width="69" valign="middle">
<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value="选项8">选项8</option>
</select>
</td>
</tr>
</table>
</body>
分享到：
相关推荐
本文将深入探讨如何实现一个功能，即将下拉列表`select`中的选中项从左侧框移动到右侧框的示例，并讨论与之相关的JavaScript技术和事件处理。 首先，我们需要理解`select`元素的基本结构。在HTML中，`<select>`标签...
<title>jQuery Select 移动示例 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 如果没有 jQuery，请从 https://code.jquery.com/ 下载最新版本 --> 左侧选择项 <select id=...
在某些交互式应用中，我们可能需要实现一个功能，让用户能够从一个`<select>`框（通常称为“源”或“左侧”框）选择一个或多个选项，然后将这些选项移动到另一个`<select>`框（“目标”或“右侧”框）。这种操作常见...
压缩包中的“下拉复选框”可能包含了示例代码、CSS样式、JavaScript文件和文档，帮助开发者快速理解和使用Bootstrap Select。通过研究这些文件，你可以更深入地了解如何配置和自定义插件，以满足项目需求。 总之，...
在JavaScript前端开发中，我们经常需要处理用户交互，例如将左边列表中的选项移动到右边，或者反之。这个功能在各种应用场景中都很常见，比如设置、配置界面等。本篇文章将详细讲解如何用JavaScript实现这样的功能，...
这涉及到从一个`<select>`中移除元素并将其添加到另一个`<select>`： ```javascript $("#moveLeft").on("click", function() { var selectedOption = $("#leftSelect option:selected"); if (selectedOption....
Bootstrap是一个流行的前端开发框架，由Twitter开发，用于构建响应式布局和移动设备优先的Web应用程序。Bootstrap-selectpicker是Bootstrap框架的一个扩展插件，它为原生的HTML选择器提供了更美观、可定制化的选择器...
Bootstrap框架是一款流行的前端开发框架，它提供了一系列的CSS和JavaScript组件，帮助开发者快速构建响应式、移动优先的网页。在Bootstrap中，下拉框（select）通常用于创建一个可选的列表，用户可以通过点击下拉...
对于“SelectBox下拉复选框多选插件”，这意味着它是一个独立的JavaScript或CSS库，可以轻松集成到任何项目中，为下拉框添加多选和搜索功能。 5. **搜索功能**：此插件的一个关键特性是搜索功能。在大量选项的下拉...
6. **响应式设计**：考虑到现代网页需要适应不同的设备和屏幕尺寸，插件应具有良好的响应性，确保在手机和平板等移动设备上也能正常工作。 7. **性能优化**：在处理大量选项时，优化搜索速度和内存使用至关重要。...
本示例聚焦于利用JavaScript（jQuery框架）和JSON数据动态生成这样的级联选择框。以下是关于这个主题的详细讲解。 1. **jQuery框架**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
下面是一个基本的jQuery代码示例： ```javascript $(document).ready(function() { var inputs = $('input[type="text"]'); inputs.each(function(index) { $(this).on('keyup', function(event) { if (event...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
这些JavaScript插件通常已经内置了对移动设备的支持，但有时可能需要调整CSS样式以适应屏幕尺寸。 五、性能优化 在处理大量数据时，应考虑使用虚拟滚动或延迟加载，以减少初始页面加载时间和内存占用。例如，Select...
在项目中使用Bootstrap Select时，需要注意与其它库的兼容性问题，以及适时更新到最新版本以获取修复的bug和新增功能。此外，合理运用缓存和CDN服务可以提高页面加载速度，提升用户体验。 总之，Bootstrap Select是...
在本文中，我们将深入探讨如何实现两个`select`元素之间的多选选项相互移动的功能，以及相关的JavaScript代码示例。在Web开发中，这样的功能常见于用户需要在多个选项中进行选择并分配的情况，例如角色分配或者分类...
- 将左边选中的内容移动到右边 - 将右边选中的内容移动到左边 - 将左边全部内容移动到右边 - 将右边全部内容移动到左边 5. 页面元素的动态操作： 使用了jQuery提供的方法如clone()、appendTo()、remove()等，来操作...
通过学习和分析这些示例，开发者可以更快地掌握动态过滤和弹出层替换select的实现方法，并将其应用到自己的项目中。 总的来说，动态过滤填充input框和用弹出层替换select框是前端开发中提升用户体验的有效手段。...
最后，对于提供的`select移动.html`文件，它很可能包含了上述的HTML和JavaScript代码，可以直接在浏览器中打开查看并测试效果。通过学习和理解这个示例，开发者可以进一步掌握JavaScript操作DOM和处理用户交互的能力...