html多选框写法,HTML多选框

Tim Medora..

96

此示例将从左到右移动项目(一个或多个),然后再移回.无论在右侧选择了哪个项目,都将更新右侧的文本框.

我们正在使用这些元素:

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;

}

1

2

3

棒极了.非常感谢您的时间和帮助. (3认同)