这里有一个小样本,让你开始:
http://jsfiddle.net/eUDRV/3/
此示例将从左向右移动项目(一个或多个),然后再移回。无论在右侧选择什么项目都会更新右侧的文本框。
我们使用的元素:
>选择
> input type =“button”
> input type =“text”
框架:
> div
>部分
样式与简单的CSS。 JavaScript提供了功能。
HTML
1
2
3
CSS
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;
}
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());
});