<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<select id="firstselect" size="10" multiple="multiple">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
<button id="add" name="add">add</button>
<button id="addall" name="addall">addall</button>
<select id="secondselect" size="10" multiple="multiple">
<option>选项9</option>
</select>
<script type="text/javascript">
//获取按钮 注册事件
document.getElementById("add").onclick = function() {
//获取左边的select结点
var firstselect = document.getElementById("firstselect");
//获取右边的select结点
var secondselect = document.getElementById("secondselect");
//获取firstselect中的option结点,并得到其长度
var optionElements = firstselect.getElementsByTagName("option");
var len = optionElements.length;
//获取选中的option结点
//1.用select的 .selectedIndex属性来获取第一个被选中的索引
//测试是否可用 alert(firstselect.selectedIndex);
//2.移动，先将索引的第一个移过去,必须遍历所有的结点，至少8次
for ( var i = 0; i < len; i++) {
if (firstselect.selectedIndex != -1) {
secondselect
.appendChild(optionElements[firstselect.selectedIndex]);
}
}
}
//addall按钮方法一
/*
document.getElementById("addall").onclick = function() {
//获取左边的select结点
var firstselect = document.getElementById("firstselect");
//获取右边的select结点
var secondselect = document.getElementById("secondselect");
//获取firstselect中的option结点,并得到其长度
var optionElements = firstselect.getElementsByTagName("option");
var len = optionElements.length;
while ( len!=0) {
var optionElement=optionElements[0];
secondselect.appendChild(optionElement);
}
}
*/
//addalla按钮方法二
document.getElementById("addall").onclick = function() {
//获取左边的select结点
var firstselect = document.getElementById("firstselect");
//获取右边的select结点
var secondselect = document.getElementById("secondselect");
var len =firstselect.length;
for(var i=0;i<len;i++){
secondselect.appendChild(firstselect[0]);
}
}
//双击添加
document.getElementById("firstselect").ondblclick = function() {
alert("runned");
//获取左边的select结点
var firstselect = document.getElementById("firstselect");
//获取右边的select结点
var secondselect = document.getElementById("secondselect");
var optionElements=document.getElementsByTagName("option");
var len =optionElements.length;
for(var i=0;i<len;i++){
secondselect.appendChild(optionElements[firstselect.selectedIndex]);
}
}
</script>
</body>
</html>
分享到：
相关推荐
- 下拉列表的位置：当窗体移动或缩放时，下拉列表应能保持与控件顶部对齐，而不是固定在屏幕上的某个位置。 - 控件大小：控件应能根据窗体大小动态调整自身的宽度，确保显示完整的内容，而高度则根据所选项目的...
标题中的“具有Bootstrap和AngularJS的多选下拉列表”是指使用这两个流行的前端技术来创建一个功能丰富的用户界面元素，即一个多选下拉菜单。在Web开发中，这样的组件能够提高用户体验，允许用户在一个下拉菜单中...
在IT领域，多选下拉列表框是一种常见的用户界面组件，它允许用户在下拉菜单中选择一个或多个选项。这种交互方式广泛应用于各种应用程序，如网页表单、桌面软件和移动应用，以提高用户体验并优化屏幕空间。下面将详细...
确保多选下拉列表对屏幕阅读器友好，可以使用ARIA属性来增强可访问性。 综上所述，实现Web应用程序中的多选下拉列表涉及前端和后端技术的结合，包括JavaScript、CSS、HTML以及服务器端语言如C#和.NET。利用现有的库...
在移动设备上，多选下拉列表可能需要特别考虑，因为屏幕空间有限。一种常见的解决办法是将多选下拉列表转换为可扩展的检查框列表，当用户点击下拉箭头时，选项以全屏模式显示。这可以通过CSS媒体查询和JavaScript...
多选列表框，通常表现为一个下拉列表，用户可以勾选其中的一个或多个项目。在HTML中，我们使用`<select>`元素配合`multiple`属性来创建这样的表单控件。例如： ```html <option value="option1">Option 1 ...
WeUI是中国微信团队...例如，可以使用`<div class="weui-cells weui-cells_checkbox">`来定义一个多选列表，每个选项则用`<label class="weui-cell weui-check__label">`包裹，其中包含`<input type="checkbox">`和`...
此外，Layui的多选下拉框还支持搜索功能，用户可以在下拉框内输入关键字快速筛选选项，大大提高了操作效率。 关于“取值”，在Layui的多选下拉框中，你可以通过JavaScript事件来获取用户的选择。当用户完成选择后，...
在描述中提到的“左右选择”，可能是指创建了一个可操作的列表，让用户通过点击或拖动将选项从一侧移动到另一侧，以表示选择或取消选择。 在`basic.htm`中，可能会包含实现这一功能的基本HTML结构，比如一个`...
它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明： 1. **下拉列表多选框**：传统的HTML `<select>` 元素只支持单选，但通过添加多选...
在提供的`divselect 鼠标移动版`和`divselect 鼠标点击版`文件中，可能包含了不同交互模式的实现，例如鼠标悬停时展示下拉列表或点击触发显示。 总之，使用div模拟select自定义下拉列表框是网页开发中常见的技巧，...
这与多选下拉列表（允许用户选择多个选项）形成对比，后者通常需要配合`<select multiple>`属性或使用特定的库如Select2。 总结来说，下拉列表作为用户界面的重要组成部分，涉及HTML、CSS、JavaScript、数据库交互...
在IT行业中，多选下拉框是一个常见的交互元素，它允许用户从一组选项中选择多个条目。在大型数据集或复杂系统中，为了提高用户体验和效率，常常会结合模糊查询功能，使得用户能通过输入关键词快速定位所需选项。本文...
5. **插件和库**：在实际开发中，我们还可以利用现有的JavaScript库如`select2`、`selectize`等来增强下拉列表功能，如搜索、多选、分组等。这些工具往往提供了丰富的API和配置项，可以快速满足复杂的需求。 6. **...
而"mutiselect"则是指多选下拉列表，用户可以从多个选项中选择多个值。这个控件的实现通常是通过EXT的`Ext.form.field.MultiSelect`类来完成的，它扩展了基本的下拉选择框，提供了多选功能。 在描述中提到的“就像...
总的来说，这个示例展示了如何利用JavaScript与HTML的交互，实现在两个多选下拉列表之间动态转移选项的功能，这对开发交互式Web应用非常有用。在实际应用中，这些功能可以进一步扩展，例如添加错误处理、用户友好的...
1. **左右移动**：用户可以选择将选中的项从一个列表移动到另一个列表，这种方式常用于“已选”和“未选”状态之间的切换。 2. **可视化操作**：这种交互方式直观，用户能清楚地看到选择的过程。 3. **数据管理**：...
对于多选下拉菜单，可能需要多列来展示不同的选项组。 4. 实现`pickerView(_:numberOfRowsInComponent:)`方法，返回每列的行数。 5. 实现`pickerView(_:titleForRow:forComponent:)`方法，为每行提供显示文本。 二...
本章节我们将专注于如何利用jQuery创建一个用户友好的选择组件，允许用户在两个下拉列表之间移动选项。 首先，我们需要创建HTML结构，包含两个`<select>`元素，分别代表左侧的选择列表和右侧的目标列表。此外，还...
自己上课完整理的十分全面，注释一看就懂。功能很完备，比如选中A框左移到B框，不...5.关联下拉列表：选中第一个下拉列表国家，第二个下拉列表只显示对应国家的城市 6.点击按钮弹出带选项小页面，选中选项填入文本框