jQueryのappend()がうまく機能しません

Question

select要素を作成し、そのopitonへGETしてきたテンプレートの名前を動的に表示したいと思ってます。
tempRecは省略しておりますが、とある複数のレコードです。
tempRecをOrganizeRecordのfunctionで整理した後、
$.eachで追加しているはずなのですが、selectには何も追加されません。
どこが悪いのでしょうか。よろしくお願いします。

let useRec = OrganizeRecord(tempRec);
var templateSpace = $('<select>', {
    id: 'temp_select2'
});
$.each(useRec, function(key, val) {
    $('#temp_select2')
        .append($("<option></option>")
        .attr("value",val.template_name.value)
        .text(val.template_name.value));
console.log(val.template_name.value);
});
$('.kintone-app-record-headermenu-space').append(templateSpace);

function OrganizeRecord(rec){
        let returnRec = [];
        for(var i = 0 ; i<rec.records.length ; i++){
            var str = rec.records[i].template_name.value;
            if(str.indexOf("157_") >= 0){
                returnRec = returnRec.concat(rec.records[i]);
            }
        }
        return returnRec;
    }

Comments

[yambejp]

HTMLも記載してください、OrganizeRecord()は何を返しているのでしょうか？任意のトリガーはなくhtmlのロード時でよろしいですか？

[saito3]

OrganizeRecord()は引数recに157の文字を含むものを配列化して返してます。任意のトリガーはなく、htmlのロード時になります。

Answer 1

templateSpaceをappendする前にはまだtemp_select2が存在していないので、$('#temp_select2')としても見つかりません。
$.each()の前にこちらを実行してください。

$('.kintone-app-record-headermenu-space').append(templateSpace);

Comments

[saito3]

ありがとうございます！
すみませんが皆さんの意見で自身で問題を判別して解決できました！

Answer 2

 $('#temp_select2')
        .append($("<option></option>")
        .attr("value",val.template_name.value)
        .text(val.template_name.value)

これって#temp_select2にappendして（ここまではいい）
#temp_select2にattrして、#temp_select2にtextしてるってことになります。
attrとtextは<option>にしたいはずなので、以下のような感じになるかと思います。

 $('<option>')
        .attr("value",val.template_name.value)
        .text(val.template_name.value)
        .appendTo('#temp_select2')

Comments

[saito3]

確かに僕のやりたいことはそれで合ってますが、結局上記コードにしても変わりませんでした・・

Answer 3

すみません今回の問題点がわかりました。（以下自分なりの書き方と自覚せず省略している部分があると思いますのでご了承を）
jQueryでselect要素を作成し、変数に格納。
変数に格納しているだけでまだHTML要素には追加されてないので、
変数に格納されているselectにopitonを追加した後にappendしても反映されませんでした。

そこでまずはselect要素をHTMLにappend。
その後にselectに対してoptionをappendしたら意図した動きになりました。

何か引っかかるところがありますが、再度質問させて頂きます。