html多选框怎么判断选了什么,HTML多选框

这里有一个小样本，让你开始：

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());

});