html - HTML 多选框

Question

我只是想知道下面表格的名称是什么？我从早上开始在谷歌上搜索 HTML 表单列表，但我在任何地方都找不到这种表单。谁能告诉我这个表单的确切名称，这在 HTML 表单中可用吗？

我只想在我的网站中添加这种形式。它适用于 HTML 还是我应该使用 JavaScript 或它仅限于 Windows 应用程序？

Answer 1

这里有一个小示例可以帮助您入门：http: //jsfiddle.net/eUDRV/3/

此示例将项目（一个或多个）从左向右移动并再次返回。在右侧选择的任何项目都将更新右侧的文本框。

我们正在使用以下元素：

• 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;
}

<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="&lt;&lt;" />
        <input type="button" id="btnRight" value="&gt;&gt;" />
    </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>

Answer 2

它最常被称为列表框多选。这是Loudev.com上的一个轻量级 jQuery 多选库：