使用數組中的值創建HTML選項菜單？

Question

我正在創建一個基於用戶輸入插入值的數組，現在想要創建一個下拉選項菜單，其中將包含當前存儲在數組中的所有值。

有人會知道這樣做的正確方法嗎？

順便說一句使用jQuery和mootools爲這個網站如果有幫助。

Answer 1

var selectM = document.createElement("select"), values = ["hi", "hello", "hola"]; 

for(var i = 0; i < values.length; ++i) { 
    var opt = document.createElement("option"); 
    opt.value = values[i]; 
    opt.text = values[i]; 
    selectM.add(opt, null);  
} 

// do stuff with your new select menu 
document.getElementById("someDiv").appendChild(selectM); 

Answer 2

如果你想使用jQuery ...

var arr = [1, 2, 3]; 
var $select = $('<select>'); 
for (var i = 0; i < arr.length; i++) { 
    var val = arr[i]; 
    $('<option>').val(val).text(val).appendTo($select); // This assumes your array is an primitive type array, if it's an object array you could use ex. val.Value 
} 

$select.appendTo($('... your selector here ...')); 

Answer 3

，因爲你有香草JS和jQuery，這裏有一個方法通過MooTools的做1.3

var makeDropdown = function(vals) { 
    return new Element("select").adopt(vals.map(function(el) { 
     return new Element("option[value="+el+"][text="+el+"]"); 
    })); 
}; 


makeDropdown(["hi", "hello", "hola"]).inject(document.body);