JQuery selectが反映されない

質問

selectを動的に作成するコードをJQueryで書いています。そのselectの要素optionの値は作成後も何度か変更します。

　var select;
　function setSelect(from, to){
　　　select = $('<select>');
　　　for(var i = from; i <= to; i++) select.append($('<option>').text(i));
　};
　setSelect(1, 10);
　$(document.body).append(select)
　setSelect(2, 6);

上記のコードを実効するとsetSelect(2, 6);は無視された状態になります。
上記のsetSelectは引数from～引数toの値をoptionにしてselectにその値をセットします。setSelect(1, 10);で1～10までを選択できるselectができ、次に　setSelect(2, 6);でselectが2～6に変わることを期待しますが、そうなりません。どのようにしたら、変更が反映されるのでしょうか？

※実際のプログラムではsetSelect(2, 6)のような呼び出しは、プログラム（イベント発生など）が呼び出します。

回答No.2

fujillin · ベストアンサー

＞しかしながら、なぜこれでうまくいくのかは結局分かりません。

質問者様がご提示のコードは、「新しいセレクトを生成する」コードになっています。
例えば、最初のコードで
　＞setSelect(1, 10);
　＞$(document.body).append(select);
　＞setSelect(2, 6);
　　$(document.body).append(select); //追加
などとしてみれば、セレクト要素が追加されるのがわかるでしょう。

一方で、なさりたいことは、「同じselect要素に対してオプションの内容を入れ替える」ということかと推測します。
その場合は対象となるselect要素は固定なので、最初にselect要素を作成しさえすれば良く、また、入れ替えるためには一旦内容を空にしてから必要なものを追加するようにしておく必要があります。

別の考え方として、ご提示のコードのように新しくselect要素を作成し、それまでのものとそっくり入れ替える（もとのものを削除し、新しいものを追加する）ようにしても、ご希望のような結果になると思います。

お礼

ご回答ありがとうございます。理解出来ました。

質問文にあるコードでうまくいかない原因はfor文のselect = $('<select>');をしているところですね。新しいインスタンスがselectに入るためselectの参照が変わっていまい今まで参照していたものとは別の参照になっているからですね。

この質問に訪れる人のためを考え、まとめると、
select内部のoptionを変更（更新）するときは
var select = $('<select>')のように最初に宣言したら、このselectのoptionを変えるときはselect.empty()を使いselectの中を空にしてから、optionを追加すればいいです。

回答No.1

t_ohta

setSelect関数を呼び出しただけでは反映されません。
変数selectはJavaScript内のデータでしか無く、DOMに直接作用しません。

以下のようにすると、ご希望の動作になるのではないでしょうか。

var sel = $('<select id="select">');
$(document.body).append(sel)

var select = $('#select');
function setSelect(from, to){
select.empty();
for(var i = from; i <= to; i++) select.append($('<option>').text(i));
};
setSelect(1, 10);
setSelect(2, 6);

お礼

ご回答ありがとうございます

お礼を書いている途中で疑問があってそれを確かめていたら、なぜか自分でこの質問を解決する一つの方法にたどり着きました。

var select = select = $('<select>');
$(document.body).append(select); // 最初にappendしたらなぜかうまくいきました
function setSelect(from, to){
　select.empty();
　for(var i = from; i <= to; i++)
　select.append($('<option>').text(i));
};
setSelect(1, 10);
setSelect(2, 6);

なるべくなら、idを使わずに実装したかったので、上記のような形でうまくいって良かったです。しかしながら、なぜこれでうまくいくのかは結局分かりません。

＞変数selectはJavaScript内のデータでしか無く、DOMに直接作用しません。
というところに疑問をもってそれを試していたらこれにたどり着きました。一見するとDOMにも直接作用しているように思えます。どうなのでしょうか？