Tôi làm cách nào để tạo danh sách thả xuống có thể chỉnh sửa trong HTML?

Question

Tôi muốn tạo trường văn bản có danh sách thả xuống cho phép người dùng chọn một số giá trị được xác định trước. Người dùng cũng có thể nhập giá trị mới hoặc chọn giá trị được xác định trước từ danh sách thả xuống. Tôi biết rằng tôi có thể sử dụng hai vật dụng cho điều đó nhưng trong ứng dụng của tôi nó sẽ được nhiều ergonomnic nếu nó được thống nhất trong một widget.

Có tiện ích chuẩn hoặc tôi có phải sử dụng javascript của bên thứ ba không?

Tính di động của trình duyệt như thế nào?

Answer 1

Cách tốt nhất để làm điều này có lẽ là sử dụng thư viện của bên thứ ba.

Có triển khai những gì bạn đang tìm kiếm trong jQuery UI và trong dojo. jQuery là phổ biến hơn, nhưng dojo cho phép bạn khai báo một cách rõ ràng các widget trong HTML, điều này nghe có vẻ giống với những gì bạn đang tìm kiếm.

Loại nào bạn sử dụng sẽ tùy thuộc vào phong cách của bạn, nhưng cả hai đều được phát triển cho công việc trên trình duyệt chéo và cả hai sẽ được cập nhật thường xuyên hơn sao chép và dán mã.

Answer 2

Tôi không chắc chắn có cách nào để tự động thực hiện mà không cần javascript.

Điều bạn cần là thứ gì đó chạy ở phía trình duyệt để gửi biểu mẫu của bạn trở lại máy chủ khi người dùng tạo lựa chọn - do đó, javascript.

Ngoài ra, hãy đảm bảo bạn có phương tiện thay thế (nghĩa là nút gửi) cho những người đã tắt javascript.

Một ví dụ điển hình: Combo-Box Viewer

tôi đã thậm chí một combo-box phức tạp hơn ngày hôm qua, với dhtmlxCombo này, sử dụng ajax để lấy các giá trị thích hợp giữa số lượng lớn dữ liệu.

Answer 3

Thẻ <select> chỉ cho phép sử dụng các mục nhập được xác định trước. Giải pháp điển hình cho vấn đề của bạn là có một mục nhập có nhãn 'Khác' và trường chỉnh sửa bị vô hiệu hóa (<input type="text"). Thêm một số JavaScript để cho phép trường chỉnh sửa chỉ khi 'Khác' được chọn.

Có thể bằng cách nào đó tạo một menu thả xuống cho phép chỉnh sửa trực tiếp, nhưng IMO không đáng để thử. Nếu có, Amazon, Google hoặc Microsoft sẽ làm điều đó ;-) Chỉ cần hoàn thành công việc với giải pháp ít phức tạp nhất. Nó nhanh hơn (sếp của bạn có thể thích điều đó) và thường dễ bảo trì hơn (bạn có thể thích điều đó).

Answer 4

Một hộp kết hợp không may là một thứ gì đó không có trong thông số kỹ thuật HTML.

Cách duy nhất để quản lý nó, thay vì không may, là cuộn của riêng bạn hoặc sử dụng một công cụ dựng sẵn. This one trông khá đơn giản. Tôi sử dụng this one cho một ứng dụng nguồn mở mặc dù rất tiếc bạn phải trả tiền cho việc sử dụng thương mại.

Answer 5

Bạn có thể thực hiện việc này bằng cách sử dụng thẻ <datalist> trong HTML5.

<input type="text" name="product" list="productName"/> 
<datalist id="productName"> 
    <option value="Pen">Pen</option> 
    <option value="Pencil">Pencil</option> 
    <option value="Paper">Paper</option> 
</datalist> 

Nếu bạn nhấp đúp vào văn bản đầu vào trong trình duyệt, danh sách có tùy chọn được xác định sẽ xuất hiện.

Answer 6

Một CSS chút và bạn đã làm xong fiddle

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv"> 
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px; 
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" /> 
     <div style="position: absolute;" id="filterDropdownDiv"> 
<select name="filterDropDown" id="filterDropDown" tabindex="1000" 
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute; 
    top: 0px; left: 0px; z-index: 1; width: 165px;"> 
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option> 
</select> 

Answer 7

ComboBox TextBox (Đối với giá trị được xác định trước cũng như giá trị người dùng định nghĩa.)

ComboBox with TextBox (Click Here)

Answer 8

Triển khai rất đơn giản (chỉ chức năng cơ bản) dựa trên CSS và một dòng mã JS

<div class="dropdown"> 
    <input type="text" /> 
    <select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> 
     <option>This is option 1</option> 
     <option>Option 2</option> 
    </select> 
</div> 

Xin lưu ý: nó sử dụng previousElementSibling mà không được hỗ trợ in older browsers (below IE9)

.dropdown { 
    position: relative; 
    width: 200px; 
} 
.dropdown select 
{ 
    width: 100%; 
} 
.dropdown > * { 
    box-sizing: border-box; 
    height: 1.5em; 
} 
.dropdown select { 
} 
.dropdown input { 
    position: absolute; 
    width: calc(100% - 20px); 
} 

Ở đây nó được trên JSFiddle

Answer 9

này có thể đạt được với sự giúp đỡ của HTML, CSS và JQuery đơn giản. Tôi đã tạo ra một trang mẫu:

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">01:00</option> 
 
     <option value="2">02:00</option> 
 
     <option value="3">03:00</option> 
 
     <option value="4">04:00</option> 
 
     <option value="5">05:00</option> 
 
     <option value="6">06:00</option> 
 
     <option value="7">07:00</option> 
 
     <option value="8">08:00</option> 
 
     <option value="9">09:00</option> 
 
     <option value="10">10:00</option> 
 
     <option value="11">11:00</option> 
 
     <option value="12">12:00</option> 
 
     <option value="13">13:00</option> 
 
     <option value="14">14:00</option> 
 
     <option value="15">15:00</option> 
 
     <option value="16">16:00</option> 
 
     <option value="17">17:00</option> 
 
     <option value="18">18:00</option> 
 
     <option value="19">19:00</option> 
 
     <option value="20">20:00</option> 
 
     <option value="21">21:00</option> 
 
     <option value="22">22:00</option> 
 
     <option value="23">23:00</option> 
 
     <option value="24">24:00</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" maxlength="5"/> 
 
</div>