Sadece merak ediyorum formu aşağıda adı nedir? HTML formları listesi için sabahtan araştırıyordum ama bu tür bir formu hiçbir yerde bulamadım. Kimse bana bu formu tam adını söyler ve bu mevcut HTML formları mı?

Ben sadece benim web sitesinde bu tür bir formu eklemek istiyorum. Bu HTML veya JavaScript ya da sadece sınırlı için Windows uygulamalarını kullanmalıyım?

Küçük bir örnek başlamak için buraya: http://jsfiddle.net/eUDRV/3/

Bu örnek, sağdan soldan öğeleri (veya birden fazla) hareket ve tekrar geri gelecektir. Sağ tarafında seçilir ne olursa olsun sağ tarafındaki textbox güncellenir.

Öğeleri kullanıyoruz:

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

Çerçeveli:

• div
• section

Basit CSS ile tarz. İşlevi JavaScript ile sağlanır.

HTML

<section class="container">
    <div>
        <select id="leftValues" size="5" multiple></select>
    </div>
    <div>
        <input type="button" id="btnLeft" value="<<" />
        <input type="button" id="btnRight" value=">>" />
    </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>

CSS

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

JavaScript

JQuery Kütüphanesi işler biraz daha kolay hale getirmek için kullanıyorum. Bu da saf JavaScript ile yapılabilir.

$("#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());
});