HTML 多选框 [英] HTML multiple select box

问题描述

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

我只想在我的网站中添加这种表单.它适用于 HTML 还是我应该使用 JavaScript 或仅适用于 Windows 应用程序?

解决方案

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

此示例将从左到右再向后移动项目(一个或多个).在右侧选择任何项目都会更新右侧的文本框.

我们正在使用元素:

• 选择
• input type="button"
• input type="text"

框架:

• div
• 部分

使用简单的 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"] {宽度:160px；box-sizing: 边框框；}部分 {填充:8px；背景色:#f0f0f0；溢出:自动；}部分 >格{向左飘浮;填充:4px；}部分 >DIV + DIV {宽度:40px；文本对齐:居中；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><section class="容器"><div><select id="leftValues" size="5" 多个></select>

<div><input type="button" id="btnLeft" value="&lt;&lt;"/><input type="button" id="btnRight" value="&gt;>"/>

<div><select id="rightValues" size="4" 多个><选项>1</选项><option>2</option><选项>3</选项></选择><div><input type="text" id="txtRight"/>

</section>

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?

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?

解决方案

Here's a little sample to get you started: 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:

• select
• input type="button"
• input type="text"

Framed by:

• div
• section

Styled with simple CSS. Functionality is provided with JavaScript.

I'm using the jQuery library to make things a little easier. This could also be done with pure 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>

这篇关于HTML 多选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！