html多选框选中事件,HTML多选框(HTML multiple select box)

最新推荐文章于 2025-04-04 00:58:22 发布

李daxin

最新推荐文章于 2025-04-04 00:58:22 发布

阅读量952

点赞数

文章标签： html多选框选中事件

这里有一个小样本，让你开始： http://jsfiddle.net/eUDRV/3/

这个例子会从左边的项目(一个或多个)移动到右边，然后再返回。无论项目(S)在右侧选择将更新右侧的文本框中。

我们正在使用的元素：

select

input type="button"

input type="text"

装裱方式：

div

section

风格与简单的CSS。功能提供的JavaScript。

我使用jQuery库，使事情变得更容易一些。这也可以用纯JavaScript实现。

$("#btnLeft").click(function () { var selectedItem = $("#rightValues option:selected"); $("#leftValues").append(selectedItem); }); $("#btnRight").click(function () { var selectedItem = $("#leftValues option:selected"); $("#rightValues").append(selectedItem); }); $("#rightValues").change(function () { var selectedItem = $("#rightValues option:selected"); $("#txtRight").val(selectedItem.text()); }); SELECT, INPUT[type="text"] { width: 160px; box-sizing: border-box; } SECTION { padding: 8px; background-color: #f0f0f0; overflow: auto; } SECTION > DIV { float: left; padding: 4px; } SECTION > DIV + DIV { width: 40px; text-align: center; }

123