HTML多选框 [英] HTML multiple select box

问题描述

我只是想知道下面的表单的名字是什么？我从早上搜索HTML表单的列表，但是我无法在任何地方找到这种表单。任何人都可以告诉我这个表单的确切名称，这是可用的HTML表单？

我只想在我的网站中添加这种表单。是否可用于HTML，或者我应该使用JavaScript还是仅限于Windows应用程序？

解决方案

开始： http://jsfiddle.net/eUDRV/3/

这个例子会将项目（一个或多个）从左侧移动到右侧，然后再移回。无论在右侧选择哪个项目，都会更新右侧的文本框。

我们正在使用这些元素：

• select


• input type =button


• input type =text

诬陷：

• div


• 部分

CSS。 JavaScript提供了功能。

我使用jQuery库来使事情变得更简单。这也可以用纯JavaScript完成。

$ b

$（＃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 =leftValuessize =5multiple>< / select> < / DIV> < DIV> < input type =buttonid =btnLeftvalue =& lt;& lt; /> < input type =buttonid =btnRightvalue =& gt;& gt; /> < / DIV> < DIV> < select id =rightValuessize =4multiple> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> < /选择> < DIV> < input type =textid =txtRight/> < / DIV> < / div>< / 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屋！