Nhiều hộp chọn HTML

Question

Tôi chỉ tự hỏi tên của biểu mẫu dưới đây là gì? Tôi đã được Googling từ sáng cho danh sách các hình thức HTML nhưng tôi không thể tìm thấy loại hình thức bất cứ nơi nào. Bất cứ ai có thể cho tôi biết chính xác tên của mẫu này và có sẵn trong các hình thức HTML?

Tôi chỉ muốn thêm loại biểu mẫu này vào trang web của mình. Điều đó có sẵn cho HTML hay tôi nên sử dụng JavaScript hoặc chỉ giới hạn cho các ứng dụng Windows?

Answer 1

Dưới đây là một chút mẫu để giúp bạn bắt đầu: http://jsfiddle.net/eUDRV/3/

Ví dụ này sẽ chuyển mục (một hoặc nhiều) từ bên trái sang bên phải và ngược lại. Bất kỳ mục nào được chọn ở bên phải sẽ cập nhật hộp văn bản ở bên phải.

Chúng tôi đang sử dụng các yếu tố:

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

Framed bởi:

• div
• section

Được tạo kiểu bằng CSS đơn giản. Chức năng được cung cấp với JavaScript.

Tôi đang sử dụng thư viện jQuery để làm mọi việc dễ dàng hơn một chút. Điều này cũng có thể được thực hiện với JavaScript thuần túy.

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

Nó phổ biến nhất được gọi là một multiselect listbox. Dưới đây là một jQuery thư viện multiselect nhẹ tại loudev.com: