HTML 多选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15696415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML multiple select box
提问by Kerry
I am just wondering what's the name of the below form? I was Googling from morning for the list of HTML forms but I couldn't find this kind of form anywhere. Can anyone tell me the exact name of this form and is this available in HTML forms?
我只是想知道下面表格的名称是什么？我从早上开始在谷歌上搜索 HTML 表单列表，但在任何地方都找不到这种表单。谁能告诉我这个表单的确切名称，它在 HTML 表单中可用吗？
I just want to add this kind of form in my website. Is that available for HTML or should I use JavaScript or its only limited for Windows applications?
我只想在我的网站中添加这种表单。它适用于 HTML 还是我应该使用 JavaScript 或它仅适用于 Windows 应用程序？
回答by Tim Medora
Here's a little sample to get you started: http://jsfiddle.net/eUDRV/3/
这是一个让您入门的小示例：http: //jsfiddle.net/eUDRV/3/
This example will move items (one or multiple) from the left to the right and back again. Whatever item(s) are selected in the right side will update the textbox on the right side.
此示例将从左到右再向后移动项目（一个或多个）。无论在右侧选择什么项目，都会更新右侧的文本框。
We are using the elements:
我们正在使用以下元素：
selectinput type="button"input type="text"
selectinput type="button"input type="text"
Framed by:
构图：
divsection
divsection
Styled with simple CSS. Functionality is provided with JavaScript.
使用简单的 CSS 样式。功能由 JavaScript 提供。
I'm using the jQuery library to make things a little easier. This could also be done with pure 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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="container">
<div>
<select id="leftValues" size="5" multiple></select>
</div>
<div>
<input type="button" id="btnLeft" value="<<" />
<input type="button" id="btnRight" value=">>" />
</div>
<div>
<select id="rightValues" size="4" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div>
<input type="text" id="txtRight" />
</div>
</div>
</section>回答by Wim Mostrey
It's most commonly referred to as a listbox multiselect. Here's a lightweight jQuery multiselect library at loudev.com:
它通常被称为列表框多选。这是loudev.com 上的一个轻量级jQuery 多选库：
