两个下拉框 左框添加值右框删除值

于 2008-11-07 17:24:32 发布
阅读量91 收藏
点赞数
分类专栏： java学习 文章标签： J# XHTML HTML
<!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function ctl00_content_UserRolesPopup1_Button1_onclick() {
var listAllRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListAllRoles");
var listSelectedRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListSelectedRoles");
for (var i = 0; i < listAllRoles.length; i ++) {
if (listAllRoles.options[i].selected) {
var ignore = false;
for (var j = 0; j < listSelectedRoles.options.length; j ++) {
if (listSelectedRoles.options[j].text == listAllRoles.options[i].text) {
ignore = true;
break;
}
}
if (!ignore) {
var newOption = new Option(listAllRoles.options[i].text, listAllRoles.options[i].value);
listSelectedRoles.options.add(newOption);
}
}
}
}

function ctl00_content_UserRolesPopup1_Button2_onclick() {
var listSelectedRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListSelectedRoles");
var array1 = new Array();
for (var i = listSelectedRoles.options.length - 1; i >= 0; i --) {
if (listSelectedRoles.options[i].selected)
listSelectedRoles.options.remove(i);
}
}

// ]]>
</script>
</head>
<body>
<table width="500" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<select size="4" name="ctl00$content$UserRolesPopup1$ListSelectedRoles" multiple="multiple"
id="ctl00_content_UserRolesPopup1_ListSelectedRoles" style="height: 150px; width: 210px;">
</select>
</td>
<td align="center" style="width: 50px;">
<input type="submit" name="ctl00$content$UserRolesPopup1$Button1" value="<<"
id="ctl00_content_UserRolesPopup1_Button1" style="font-family: SimSun;" οnclick="return ctl00_content_UserRolesPopup1_Button1_onclick()" />
<br />
<input type="submit" name="ctl00$content$UserRolesPopup1$Button2" value=">>" id="ctl00_content_UserRolesPopup1_Button2"
style="font-family: SimSun;" οnclick="return ctl00_content_UserRolesPopup1_Button2_onclick()" />
</td>
<td align="right">
<select size="4" name="ctl00$content$UserRolesPopup1$ListAllRoles" multiple="multiple"
id="ctl00_content_UserRolesPopup1_ListAllRoles" style="height: 150px; width: 210px;">
<option value="0f3e50fb-43e8-42ae-ac58-4f973de15091">Administrators</option>
<option value="d259f6d2-84fd-4ed2-bebc-bdbd687da615">Guests</option>
<option value="35f4bc1e-4e11-4bc5-ab3a-b53bf471197c">Power Users</option>
<option value="e07e0a7f-ea0d-4e1c-86ba-42905ff72a5f">Users</option>
</select>
</td>
</tr>
</table>
</body>
</html>
以上代码可直接编辑使用！
iteye_10211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS下拉框内容左右移动效果的具体实现
10-27
这个效果通常用于用户界面中，让用户能够方便地在两个下拉框之间转移选项，例如选择并添加或移除项目。我们将分析提供的代码示例，并解释其中的关键点。 首先，我们有两个具有相同选项的`<select>`元素，一个名为`...
EAS 修改下拉列表选项（KDComboBox）
u011992073的博客
07-14 2390
KDComboBox usedState= (KDComboBox)this.kdtEntrys.getColumn("usedState").getEditor().getComponent(); usedState.removeAllItems(); //第一种 UserStateEnum[] stateEnums=new UserStateEnum[2]
jquery实现下拉框左右选择功能
10-20
接下来是CSS样式，用于布局和美化界面，确保两个下拉框和按钮对齐。 ```css .cotentl { float: left; } .btnAdd { float: left; padding:30px 5px; } ``` 最后，是jQuery脚本，用于实现各种功能。当页面加载完成时...
jQuery实现下拉框左右选择的简单实例
10-26
标题中的“jQuery实现下拉框左右选择的简单实例”指的是使用jQuery库来创建一个交互式的下拉选择框，用户可以在两个并排的下拉框之间移动选项。这种设计常见于数据筛选或设置选择中，方便用户在多个选项间进行转移...
jquery下拉框左右选择
10-14
3. 编写处理函数，负责在两个下拉框之间移动选项。 4. 如果需要动态加载数据，使用AJAX与服务器通信。 5. 使用CSS对下拉框和按钮进行样式设定，确保美观且易于操作。 6. 对于响应式设计，调整CSS以适应不同屏幕尺寸...
JavaScript实现两个select下拉框选项左移右移
11-29
在本文中，我们将探讨如何使用JavaScript实现两个`select`下拉框之间的选项移动功能，包括左移和右移。这个小程序对于用户交互和数据管理有实际应用价值，尤其是在需要动态调整选项列表的情景中。 首先，我们需要...
geopandas-0.13.1-py3-none-any.whl
08-31
GeoPandas是一个开源的Python库，旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力，为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍： 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库，用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构，允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame：GeoPandas的核心数据结构，是Pandas DataFrame的扩展。它包含一个或多个列，其中至少一列是几何列（geometry column），用于存储地理空间几何图形（如点、线、多边形等）。 GeoSeries：GeoPandas中的另一个重要数据结构，类似于Pandas的Series，但用于存储几何图形序列。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式，包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据，并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形，包括点、线、多边形等。它提供了丰富的空间操作函数，如缓冲区分析、交集、并集、差集等，使得用户可以方便地进行地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能，可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作，可以将两个GeoDataFrame按照空间关系（如相交、包含等）进行连接。此外，它还支持空间索引，可以提高地理空间数据查询的效率。
lxml-5.0.1-cp310-cp310-win_amd64.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
单片机资料c源码通过矩阵按键与数码管单片机资料c源码通过矩阵按键与数码管
08-31
单片机资料c源码通过矩阵按键与数码管单片机资料c源码通过矩阵按键与数码管提取方式是百度网盘分享地址
本地音乐播放器优化版源码20240831
08-31
本地音乐播放器优化版源码20240831。优化后的界面和使用感觉更好。
使用matlab生成动图与视频，仿真实用小技巧
最新发布
08-31
使用matlab生成动图与视频，仿真实用小技巧
SQLAlchemy-2.0.31-cp39-cp39-manylinux_2_17_aarch64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
监理安全巡视检查记录表.doc
08-31
监理安全巡视检查记录表.doc
lxml-5.0.1-cp27-cp27m-win32.whl
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
Go语言的包管理与模块化开发.md
08-31
Go语言的包管理与模块化开发，涵盖了Go包的基本概念、导入与使用、以及包的可见性等基础内容。文章接着深入探讨了Go Modules系统的引入背景、结构以及常用的依赖管理命令，解决了Go 1.11之前`GOPATH`管理模式带来的复杂性问题。通过模块系统，开发者可以更好地控制版本管理、优化依赖关系，并实现模块的多版本共存。文章还详细说明了如何进行模块化开发，包括模块划分、封装、依赖管理等，并通过具体的用户管理系统示例展示了模块化开发的实际应用。最后，文章探讨了Go Modules的高级功能，如语义版本控制、私有模块管理、模块代理与镜像等，并提出了模块化开发的最佳实践建议，如保持模块独立性、避免循环依赖、定期更新依赖、锁定版本等。这些内容为开发者提供了关于Go模块化开发的全面指导，旨在提升代码的组织效率和项目的可维护性。
输变电工程报审表监理审查意见填写范例.doc
08-31
输变电工程报审表监理审查意见填写范例.doc
Vue第五天.xmind
08-31
框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法创建挂载更新销毁。
基于SpringBoot和Vue的台球赛事服务网站的设计与实现
08-31
在快速发展的信息时代，体育竞赛作为群众文化娱乐的一部分，已日益受到广泛关注。台球，凭借其独有魅力及技术含量，吸引了众多爱好者的参与和观看。然而，随着比赛活动的增加，现存的台球赛事服务平台面临着信息管理不集中、报名程序繁琐、数据统计缺乏效率等问题。为此，开发一套完善的台球赛事服务网站显得尤为迫切，这将极大提升赛事的组织效率，优化参赛体验，并促进台球教学活动的普及。 该台球赛事服务网站采用了前后端分离的开发模式；后端基于Spring Boot框架，结合MyBatis作为数据持久化工具，以MySQL作为数据库管理系统，前端选用Vue框架搭配Axios进行数据交互。该系统实现了用户管理，能够高效处理用户信息的注册、登录与认证；评论管理，提供用户对赛事的交流平台；比赛管理，从赛事发布到成绩录入一体化处理；报名管理，简化选手报名流程，实现在线操作；教学管理，交流台球技巧与策略；数据统计，赛事数据的自动化分析与呈现。整体上系统架构清晰，功能模块化，操作简便。 通过运用现代化的信息技术构建服务网站，该系统成功解决了台球赛事组织分散，信息不透明等问题。使用此系统后，主办方能够轻松地进行赛事的统筹规划，减
下拉框点击按钮将左边的移到右边
05-25
您可以使用 JavaScript 和 HTML 实现这个功能。具体步骤如下： 1. 在 HTML 中创建两个 select 元素，一个用于左侧选项，一个用于右侧选项。 ```html <select id="leftSelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <select id="rightSelect"> </select> ``` 2. 创建一个按钮，用于移动选项。当点击按钮时，将左侧选中的选项移动到右侧 select 中。 ```html <button onclick="moveOption()">移动选项</button> ``` 3. 在 JavaScript 中实现 moveOption() 函数，用于移动选项。该函数应该获取左侧 select 中选中的选项，将其添加到右侧 select 中，并从左侧 select 中删除。 ```javascript function moveOption() { var leftSelect = document.getElementById("leftSelect"); var rightSelect = document.getElementById("rightSelect"); // 获取选中的选项 var selectedOption = leftSelect.options[leftSelect.selectedIndex]; // 添加到右侧 select 中 rightSelect.appendChild(selectedOption); // 从左侧 select 中删除 leftSelect.remove(leftSelect.selectedIndex); } ``` 4. 最后，您可以根据需要添加样式和其他功能来完善这个功能。 完整的 HTML 和 JavaScript 代码如下： ```html <select id="leftSelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <select id="rightSelect"> </select> <button onclick="moveOption()">移动选项</button> <script> function moveOption() { var leftSelect = document.getElementById("leftSelect"); var rightSelect = document.getElementById("rightSelect"); // 获取选中的选项 var selectedOption = leftSelect.options[leftSelect.selectedIndex]; // 添加到右侧 select 中 rightSelect.appendChild(selectedOption); // 从左侧 select 中删除 leftSelect.remove(leftSelect.selectedIndex); } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值