<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form name=meizz>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
<option value=A>102所
<option value=B>院本部
<option value=C>211长
<option value=D>12所
<option value=E>19所
<option value=F>13所
<option value=G>16所
<option value=H>14所
</select>
</td>
<td>
<select id=list2 size=8 style="width:100px;" ondblclick="moveRight(this),putvalue(this.form.list2)">
</select>
</td>
</tr>
</table>
</form>
<label id="tvalue"></label>
<script language="JavaScript"><!--
function moveOption(e1, e2){
try{
var e = e1.options[e1.selectedIndex];
var m=0;
for(i=0;i<e2.length;i++)
{
if(e1.options[e1.selectedIndex].text==e2.options[i].text)
{
m=1;
}
}
if(m!=1)
{
e2.options.add(new Option(e.text, e.value));
}
putvalue(e2);
} catch(e){}
}
function moveRight(e2){
if(e2.selectedIndex!=-1){
e2.options.remove(e2.selectedIndex);
}
}
function putvalue(e2)
{
var s="选择的内容：";
for(i=0;i<e2.length;i++)
{
if(i>0)
s=s+","
s+=e2.options[i].text;
}
document.getElementById("tvalue").innerHTML=s;
}
//--></script>
</body>
</html>
分享到：
相关推荐
子查询`(select au_id from titleauthor)`获取所有出版过书籍的作者ID，并将这些ID组成一个列表。外部查询再利用这个列表筛选出所有出版过书籍的作者信息。 #### 五、子查询与其他查询方式的对比 尽管子查询非常...
两个相关联的select，一个select的选择会影响另一个select的输出结果
在IT行业中，尤其是在前端开发领域，我们经常遇到需要实现互斥选择的情况，即一组多选框（`<select>`元素）之间只能有一个被选中。这样的功能在很多场景下都有应用，比如用户需要从多个选项中单选一个，或者在配置...
`select`函数的使用可以避免程序陷入繁忙等待，提高系统资源利用率，实现一个服务器与多个客户端的高效通信。 `select`函数的基本语法如下： ```c int select(int nfds, fd_set *readfds, fd_set *writefds, fd_...
`bootstrap-select`是一个基于Bootstrap的下拉框增强插件，它提供了丰富的自定义选项和交互性，包括搜索功能。这个插件允许用户在下拉框中输入文字，系统会实时地进行模糊匹配，展示与输入文字相关的选项，极大地...
本教程将深入探讨如何利用JavaScript实现从一个`select`（select1）中选择选项并将其移动到另一个`select`（select2）的过程，这在需要对可选项目进行动态管理的场景中非常实用。 首先，我们需要在HTML中定义两个`...
`<select>`是HTML中的一个表单元素，它包含一组`<option>`标签，用户可以从这些选项中选择一项。`<option>`标签定义了下拉列表中的各个选项。当用户更改了所选的选项时，`<select>`元素就会触发`change`事件，我们...
在描述中提到，文件包含了DEMO，这对于初学者来说，是一个很好的学习起点，可以通过查看和运行示例代码快速理解插件的工作原理和用法。 其次，XM-SELECT提供了设置默认值的功能。这意味着在页面加载时，下拉框可以...
自制的jquery插件，只需要一行代码，即可将select控件变成一个即可以输入也可以选择的元素，输入时也会有智能提示。对原来的select的操作完全没有改变，取值依然是取select的值，设置选中，添加项删除项等等都没有...
`vue-select`是一个专为Vue.js设计的原生组件，它模仿了Select2的功能，提供了丰富的特性和自定义选项，以满足开发者在项目中的各种需求。 `vue-select`组件的核心特性包括： 1. **多选支持**：与Select2类似，`...
这两个文件是jQuery的一个插件——Editable Select。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互。而Editable Select插件则是基于jQuery的，用于将普通的`select`元素转换为可编辑的...
以下是一个简单的jQuery实现，展示了如何在三个`select`元素之间实现互斥联动： ```html <!DOCTYPE html> <title>jQuery Select 互斥联动 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></...
`jquery.editable-select`是一个jQuery插件，它提供了可编辑的下拉选择框，自带搜索功能。使用这个库可以大大简化开发过程。首先，你需要在页面中引入jQuery和`jquery.editable-select`的JS和CSS文件。然后，通过...
HTML中的`<select>`元素用于创建一个可选的列表，用户可以从这些选项中进行选择。例如： ```html <select> <option value="option1">Option 1 <option value="option2">Option 2 <!-- 更多选项 --> </select> ``...
当任一select的选中值改变时，它会将当前选中值传递到另一个select，并清除自身的选中状态。这样，用户在任一侧选择一个值后，该值会立即被交换到另一侧，同时自身清空。 在实际应用中，你可能需要根据业务需求进行...
在“select2-ztree”项目中，Select2 被用来创建一个可搜索、可多选的下拉框，用户可以通过这个下拉框来选择需要的项。 ZTree 是一个基于jQuery的树形插件，它支持数据动态加载、拖拽、节点编辑等多种功能。在与...
这段JavaScript代码首先将原始的`<option>`元素保存到一个数据属性中，然后用带有图片和文本的`<div>`元素替换它们。当用户选择一个选项时，`<select>`的`change`事件触发，重新渲染选项以反映新的选择。 CSS样式是...
通过以上步骤，你可以为`select`元素添加一个功能完善的搜索框。`Chosen`库不仅提供了搜索功能，还支持多选、宽度自适应等特性，是实现高级下拉列表的一个强大工具。在实际项目中，可以根据具体需求进行调整和定制，...
为了提升用户体验，开发者通常会选择使用第三方库来增强这一组件，其中Select2是一个广受欢迎的选择。本文将详细介绍Select2及其相关文件`select2.min.js`和`select2.min.css`，以及它们如何在项目中发挥重要作用。 ...