jQueryでDOM生成後に値を取るとNULL

質問

下記のような内容でjQueryを使ってDOMの中身を生成後、その値をjQueryで取ろうとしてもNULLになります。

<-- htmlの本体 -->
<select id="user">
</select>

<-- ページ読み込み時 -->
$(document).ready(function () {
↓
ajaxをつかってサーバーのPHPがDOMの中身を生成し、呼び出し元に戻す
↓
<select id="user">
<option value="1">山田さん</option>
<option value="2">鈴木さん</option>
</select>
↓
DOMの中身が追加された直後に、

user_id = $("#user").val();

としても、値がNULLとなります。

これは、ajaxでDOMの中身を生成して挿入しても、html本体にあるのは中身のない<select id="user">となっているから、NULLが返ってくるという理解でいいのでしょうか？

<select id="user">を変更したときに、値を取得するという関数を作ると、正しい値が取得されます。

希望しているのは、ページ読み込み時にDBから値を取ってきてリストボックスを生成し、生成されたリストボックスの一番上の値を使って、別のDOMをさらに生成する、と言うのを自動で行いたいのですが、これは無理なのでしょうか？

回答No.3

t_ohta · ベストアンサー

＞　ajax通信を行っている関数の中の場合は、.doneの中に次にしたい処理を書けば、ajax通信完了後に処理をしてくれると思うんですが、ajax通信を行っている関数の外側で次の処理を書いている場合は、どのようにしてajax通信を行っている関数が処理が完了したかを判定すれば良いのでしょうか？

.done の中から次の処理を書いた関数を呼び出すなどと言った方法だったり、setTimeout とか使って定期的にDOMの状態を確認して中身が入っていたら次の処理を実行とかって事になるんですが、処理の階層がどんどん深くなってしまうので Promise とか使って同期処理のようにプログラムを書くのがスマートかもしれませんね。

補足

なるほど、時間を指定してDOMの状態をチェックして処理を実行したり、Promiseを使ったりして対処するんですね。

ヒントをいただけたので、再度よく勉強して、改良してみます！

ご回答ありがとうございました。

回答No.2

t_ohta

＞　DOM生成→値取得という一連の流れでやるとNULLになる理由がよくわからなくて困っています...

選択をしているのであればタイミングの問題ですね。
JavaScriptを基本的に非同期で動作するので、<select>にoptionを追加する命令や値を選択する命令を実行してもDOMの生成が終わる前に次のステップへ進んでしまいます。
なので、前の処理が確実に終わっていないと出来ない処理は前の処理が終わった事を確認してから実行するようにしないといけません。

補足

>非同期で動作するので
>前の処理が終わった事を確認してから実行

やはりそうですよねぇ。そんな気はしていました...

ajax通信を行っている関数の中の場合は、.doneの中に次にしたい処理を書けば、ajax通信完了後に処理をしてくれると思うんですが、ajax通信を行っている関数の外側で次の処理を書いている場合は、どのようにしてajax通信を行っている関数が処理が完了したかを判定すれば良いのでしょうか？

回答No.1

t_ohta

中身が追加されてもセレクトボックスで何も選択していないからと言う事はありませんか？

補足

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

selectを生成しているajaxの.doneのところに、

$('#user').prop('selectedIndex', 1);

という感じで、indexを指定して選択状態にしてもNULLが返ってきます。

DOMを生成しているajaxの外側、

var user_id = $("#user").val();

の一つ上のところに、

$('#user').prop('selectedIndex', 1);

としても、やはりNULLが返ってきます。

button等に値を取得する関数を設定すれば、キチンと値を取ることが出来るので、DOM生成→値取得という一連の流れでやるとNULLになる理由がよくわからなくて困っています...