Pole wyboru wielokrotnego HTML

Question

Zastanawiam się tylko, jak nazywa się poniższy formularz? Od rana szukałem w Google listy formularzy HTML, ale nigdzie nie mogłem znaleźć tego rodzaju formularza. Czy ktoś może podać dokładną nazwę tego formularza i czy jest on dostępny w formularzach HTML?

Chcę tylko dodać tego rodzaju postaci, w mojej stronie. Czy jest to dostępne dla HTML lub czy powinienem używać JavaScriptu lub jego ograniczonego tylko dla aplikacji Windows?

Answer 1

Oto mały przykład, aby zacząć: http://jsfiddle.net/eUDRV/3/

Ten przykład przenoszenie elementów (jednego lub wielu) od lewej do prawej iz powrotem. Wszystkie elementy wybrane z prawej strony zaktualizują pole tekstowe po prawej stronie.

Jesteśmy przy użyciu następujących elementów:

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

obramowane:

• div
• section

stylem prostym CSS. Funkcjonalność zapewnia JavaScript.

Używam biblioteki jQuery, aby trochę ułatwić. Można to również zrobić za pomocą czystego 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>

Answer 2

To najczęściej określany jako wielokrotny listbox. Oto lekka biblioteka jQuery multiselect w loudev.com: