sử dụng một mảng javascript để điền vào một hộp chọn thả xuống

Question

Tôi có một tệp văn bản mà tôi đang đọc và lưu trữ dữ liệu trong một mảng javascript, đó là danh sách các món ăn. Tôi muốn sử dụng mảng để điền vào một hộp chọn thả xuống. Tôi biết làm thế nào để mã cứng trong các giá trị cho hộp thả xuống (sử dụng đúng cho tôi nếu tôi sai) nhưng tôi muốn để có thể sử dụng các mảng để điền nó lên để thay thế.

<script type="text/javascript"> 
var cuisines = ["Chinese","Indian"];    
</script> 

<select id="CusineList"></select> 

tôi đã cứng mã hoá một mảng để đơn giản, "CuisineList" là thả tôi xuống hộp

Answer 1

Sử dụng một vòng lặp for để lặp qua mảng của bạn. Đối với mỗi chuỗi, hãy tạo thành phần option mới, gán chuỗi làm innerHTML và value, sau đó nối nó vào phần tử select.

var cuisines = ["Chinese","Indian"];  
var sel = document.getElementById('CuisineList'); 
for(var i = 0; i < cuisines.length; i++) { 
    var opt = document.createElement('option'); 
    opt.innerHTML = cuisines[i]; 
    opt.value = cuisines[i]; 
    sel.appendChild(opt); 
} 

DEMO

UPDATE: Sử dụng createDocumentFragment và forEach

Nếu bạn có một danh sách rất lớn của các yếu tố mà bạn muốn thêm vào một tài liệu, nó có thể không performant để nối thêm mỗi phần tử mới riêng lẻ. DocumentFragment hoạt động như một đối tượng tài liệu có trọng lượng nhẹ có thể được sử dụng để thu thập các phần tử. Khi tất cả các phần tử của bạn đã sẵn sàng, bạn có thể thực thi một hoạt động appendChild đơn lẻ để DOM chỉ cập nhật một lần, thay vì n lần.

var cuisines = ["Chinese","Indian"];  

var sel = document.getElementById('CuisineList'); 
var fragment = document.createDocumentFragment(); 

cuisines.forEach(function(cuisine, index) { 
    var opt = document.createElement('option'); 
    opt.innerHTML = cuisine; 
    opt.value = cuisine; 
    fragment.appendChild(opt); 
}); 

sel.appendChild(fragment); 

DEMO

Answer 2

Đây là một phần từ một REST Dịch vụ Tôi đã viết gần đây.

var select = $("#productSelect") 
for (var prop in data) { 
    var option = document.createElement('option'); 
    option.innerHTML = data[prop].ProduktName 
    option.value = data[prop].ProduktName; 
    select.append(option) 
} 

Lý do tại sao im đăng bài này là vì appendChild() không hoạt động trong trường hợp của tôi nên tôi quyết định đưa ra một khả năng khác hoạt động tốt.