Коробка с несколькими вариантами HTML

Мне просто интересно, как выглядит название ниже? Я был Googling с утра для списка форм HTML, но я не мог найти такую ​​форму где угодно. Может ли кто-нибудь сказать мне точное имя этой формы и доступно ли это в форматах HTML?

enter image description here

Я просто хочу добавить этот вид формы на свой сайт. Является ли это доступным для HTML или я должен использовать JavaScript или его ограничение только для приложений Windows?

Ответы

Ответ 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>

Ответ 2

Это чаще всего называется мультиселектором списка. Здесь представлена ​​легкая многосетевая библиотека jQuery в loudev.com:

MultiSelect