jQueryでプルダウンメニューを作成したい

Question

前提・実現したいこと

GoogleAppsScriptとjQueryを使い、アマチュア無線の交信記録を登録するWebアプリを作成しています。
現在、「自分が使っている無線機の名前と種類が保存されたスプレッドシートを参照し、持っている無線機の名前を元にプルダウンメニューを作成する」ような機能を実現しようとしています。

発生している問題・エラーメッセージ

スプレッドシートの参照や2次元配列での取得、必要な部分の取り出しなどは問題なく行えるのですが、もっと初歩的なところで躓いてしまいました。
jQueryを使い、<select>と<option>要素を追加することでプルダウンメニューを作ろうとしているのですが、配列などの余計な要素を取り除いてもうまく実現することができず、次の画像のような表示になってしまいます。

（↑最上部のプルダウンメニュー選択肢として登録したい「選択してください」が、そのまま表示されてしまう。）

該当のソースコード

「RIGs_menu」という<div>の中に各要素を追加することを目標として次のコードを書きました。
（実際は配列を引っ張ってきてfor文で必要な回数だけ回すようにしますが……）

function make_pdmenu(){
  $(".RIGs_menu").append("<select>");
  $(".RIGs_menu").append("<option value=\"\">選択してください</option>");
  $(".RIGs_menu").append("</select>");
}

試したこと

jQueryを用いずにそのままindex.htmlにベタ打ちしたら問題なく動くことは確認できました。

<select>
  <option value="">選択してください</option>
</select>

また、 $(".RIGs_menu").append("<h1>hoge</h1>");のようにすることで、特大のhogeを表示できました。

コードは書いた通りにしか動かないはずなので、たぶん私がとても愚かなミスをしているんだと思います。
お気づきの方はお教え願います。

Answer 1

落ち着いて考えてみてください。
HTMLで書けるならわかると思います。

$(".RIGs_menu").append("<select>");
RIGs_menuというclassを持った要素に<select></select>を追加しています。

$(".RIGs_menu").append("<option value=\"\">選択してください</option>");
RIGs_menuというclassを持った要素に<option /*中略*/</option>という要素を追加しています。

$(".RIGs_menu").append("</select>");
これは追加しているものが不正なのでなにも追加されません。

ここまで書けばなんとなくおわかりだと思いますが、これだと

<*** class="RIGs_menu">
  <select></select>
  <option value="">選択してください</option>
</***>

こうなっちゃうんですね。

よって

// select要素を作る
var $select = $('<select>');
// selectにoptionを追加する
$select.append('<option value=\"\">選択してください</option>');
/* optionを複数足すならここに追加していく */

// select要素を.RIGs_menu要素に足す
$(".RIGs_menu").append($select);

こうすれば正しく追加できます。

Comments

[ishiokapl23]

早速の回答ありがとうございます！
なるほど、<select>要素を.appendした時点ですでに<select>は閉じられてるんですね。
例示していただいたコードを参考に直したところ、無事に意図通りのコードになりました。
迅速な回答本当にありがとうございました。

[spookybird]

まだ少し勘違いがあるようなので補足しておきます。
<select>要素をappendした時点ですでに閉じられている、というのはちょっと違ってます。
これが閉じているかどうかが今回の問題点ではありません。

$(foo).append(bar) というのは、「foo」に「bar」を追加する という動作をします。
続けて $(foo).append(baz) と書いても、「foo」に「baz」を追加します。
「foo」に「bar」と「baz」が追加されるわけです。

今回の場合に当てはめてざっくり書くと
「RIGs_menu」に「select」を追加して、
「RIGs_menu」に「option」を追加していたわけです。
これじゃあ正しい構成にはなりません。

「select」に「option」を追加しないといけないのです。
なので、まず「select」を作成し、作成した「select」に「option」を追加し、最後に「RIGs_menu」に「select」を追加しているんです。

ご理解いただけましたか？

[ishiokapl23]

なるほど、これまでは単純に「<select>」という文字列を追加していた―程度の認識でしたが、そもそも間違えていたことに気づきました。
またoptionはselectの階下にある要素だという着眼がありませんでした。勉強になります！