2013-07-29 102 views
8

Tôi có một chương trình đơn giản để lấy các giá trị từ tệp văn bản trên máy chủ và sau đó điền vào trình dữ liệu làm lựa chọn trong trường nhập văn bản.Giá trị dữ liệu số Html từ mảng trong javascript

Với mục đích này, bước đầu tiên tôi muốn thực hiện là tôi muốn biết rằng mảng javascript có thể được sử dụng như một tùy chọn dữ liệu động như thế nào.

Mã của tôi là:

<html> 
<script> 

var mycars = new Array(); 
mycars[0]='Herr'; 
mycars[1]='Frau'; 

</script> 

<input name="anrede" list="anrede" /> 
<datalist id="anrede"> 
<option value= mycars[0]></option> 
<option value="Frau"></option> 
</datalist> 
</html> 

Tôi muốn để cư trú trong trường văn bản đầu vào chứa datalist như gợi ý từ mảng. Ngoài ra ở đây tôi havenot đưa vào tài khoản các giá trị mảng. Trên thực tế tôi không cần hai tùy chọn dữ liệu nhưng dxnamic tùy thuộc vào độ dài mảng

Trả lời

8

Tôi không chắc liệu tôi có hiểu rõ câu hỏi của bạn hay không. Dù sao, hãy thử này:

<input name="car" list="anrede" /> 
<datalist id="anrede"></datalist> 

<script type="text/javascript"> 
    var mycars = new Array(); 
    mycars[0]='Herr'; 
    mycars[1]='Frau'; 

    var options = ''; 

    for(var i = 0; i < mycars.length; i++) 
    options += '<option value="'+mycars[i]+'" />'; 

    document.getElementById('anrede').innerHTML = options; 
</script> 
+0

cảm ơn cho câu trả lời vâng nó hoạt động nhưng tôi muốn hỏi một điều nữa cho khái niệm rằng khi tôi đã cố gắng \t \t nó không hoạt động được là sai lầm – Zeeshan

+1

là điều này là do không tạo đối tượng dữ liệu và tôi nhận được nó theo id không được tạo ra – Zeeshan

+2

@Zeeshan Nó không hoạt động vì tập lệnh được đặt trước phần tử. Nó được phân tích cú pháp và xử lý trước toàn bộ trang. –

1

Bạn có thể làm điều đó jQuery cách - nhưng mặt khác, vì bạn đang xử lý dữ liệu trên máy chủ, bạn có thể tạo ra HTML trực tiếp ở đó (chỉ là một gợi ý).

<script> 

var mycars = new Array(); 
mycars[0]='Herr'; 
mycars[1]='Frau'; 

$(document).ready(function() { 
    $(mycars).each(function(index, item) { 
     var option = $('<option value="'+item+'"></option>'); 
     $('#anrede').append(option); 
    }); 
}); 

</script> 

<input name="anrede" list="anrede" /> 
<datalist id="anrede"> 
    <!-- options are filled in the script --> 
</datalist> 

Dưới đây là một JSFiddle với mã này để bạn immediatelly có thể thử nó: http://jsfiddle.net/mBMrR/

+0

khi tôi thực hiện nó nó nói lỗi tham chiếu tức là tham số lỗi: $ không được xác định. – Zeeshan

+0

Bạn cần tải xuống và đưa jQuery vào dự án của bạn. – daxur

+0

yeah nó hoạt động bây giờ ... cảm ơn và một điều nữa bạn có thể mô tả waht là gợi ý của bạn "bạn có thể tạo HTML trực tiếp ở đó (chỉ là một gợi ý)." – Zeeshan

17

Đây là một câu hỏi cũ và đã trả lời đầy đủ, nhưng tôi sẽ ném phương pháp DOM ở đây anyway cho bất cứ ai không thích sử dụng HTML theo nghĩa đen.

<input name="car" list="anrede" /> 
<datalist id="anrede"></datalist> 

<script> 
var mycars = ['Herr','Frau']; 
var list = document.getElementById('anrede'); 

mycars.forEach(function(item){ 
    var option = document.createElement('option'); 
    option.value = item; 
    list.appendChild(option); 
}); 
</script> 

Here's the fiddle.

4

Nếu bạn đang sử dụng ES6, bạn có thể làm theo cách này, đây là kỹ thuật của Paul Walls với cú pháp ES6.

const list = document.getElementById('anrede'); 
 

 
['Herr','Frau'].forEach(item => { 
 
    let option = document.createElement('option'); 
 
    option.value = item; 
 
    list.appendChild(option); 
 
});
<input name="car" list="anrede" /> 
 
<datalist id="anrede"></datalist>

Các vấn đề liên quan