html - HTML 複数選択ボックス

Question

以下のフォームの名前は何ですか？HTMLフォームのリストを朝からグーグルで検索しましたが、この種のフォームはどこにも見つかりませんでした。このフォームの正確な名前を誰か教えてもらえますか? HTML フォームで利用できますか?

この種のフォームを自分の Web サイトに追加したいだけです。それは HTML で利用できますか、それとも JavaScript を使用する必要がありますか、それとも Windows アプリケーションに限定されますか?

Answer 1

開始するための小さなサンプルを次に示します: http://jsfiddle.net/eUDRV/3/

この例では、項目 (1 つまたは複数) を左から右に移動し、再び元に戻します。右側で選択されたアイテムは、右側のテキストボックスを更新します。

要素を使用しています：

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