ajax によって取得されたデータを選択ボックスに入力したいと思います。
最初の HTML コードは次のようになります。
<select id="myid" name="myname">
</select>
私は避ける必要がありinnerHTML
、他のそのような回避策があります。使ってみappendChild
ましたが、うまくいかないようでした。私はプロトタイプに本当に慣れていないので、どうすればいいのか本当にわかりません。
ajax によって取得されたデータを選択ボックスに入力したいと思います。
最初の HTML コードは次のようになります。
<select id="myid" name="myname">
</select>
私は避ける必要がありinnerHTML
、他のそのような回避策があります。使ってみappendChild
ましたが、うまくいかないようでした。私はプロトタイプに本当に慣れていないので、どうすればいいのか本当にわかりません。
自己作成オブジェクトのすべてのメンバーをキーと値のペアとして要素に追加したいと仮定すると、次の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(''));
コードの背後にある基本的な考え方はoption
、特定のデータ オブジェクトから要素を作成し、それらのすべてを文字列に変換することです。これはmapメソッドによって行われます。
は$H
、データ オブジェクトを Prototype オブジェクトに変換します。これは、マップ呼び出しの最初のパラメーターにオブジェクトをHash
渡すため、ここで便利です。{ key, value }
すべての要素を文字列に変換した後、それらをメソッドjoin
で使用できるようにするには、空の文字列 (または、HTML 以外の任意のコード、\n も同様) を使用する必要があります。update
正直なところ、Element#updateは使用しinnerHTML
ているため、実際には回避策ではありません。それを行う方法は 1 つにすぎません。