正確的方式使用原型的JS

Question

我想填充阿賈克斯獲取數據的選擇框來填充選擇框。

最初的HTML代碼如下所示：

<select id="myid" name="myname"> 
</select> 

我需要避免innerHTML等這樣的解決方法。我嘗試使用appendChild，但它似乎沒有工作。 我真的很新的原型，所以我真的不知道如何去做。

Answer 1

假設你想自創建對象作爲鍵值對的所有成員添加到select元素，你能做到這一點是這樣的：

var data = { 
    a: 'Peter', 
    b: 'Paul', 
    c: 'Mary' 
}; 

$('mySelect').update($H(data).map(function(o) { 
    return '<option value="' + o.key + '">' + o.value + '</option>'; 
}).join('')); 
​ 

你會找到一個jsFiddle of it here。

的代碼背後的基本想法是，你創建一個從給定數據對象的option元素，由他們中的每一個轉化成字符串。這是通過map方法完成的。

$H將把數據對象轉換爲原型Hash對象，這在這裏派上用場，因爲它會將{ key, value }對象傳遞給它的地圖調用的第一個參數。

轉換爲字符串的所有元素之後，你只需要join他們用一個空字符串（或任何你喜歡的非HTML代碼，\ n也同樣可以），以能夠使用他們爲update方法。

說實話，Element#update使用innerHTML，這實際上不是一種解決方法。這只是一種方法。