複数のセレクトボックスに配列から作成したoptionを入れたい

Question

連想配列から作成したoptionを複数のセレクトボックスに入れたいのですが、
最後のselectのみ追加され、他のselectには追加されません。
mapをeachにしてもやってみましたが、結果は変わりませんでした。

ソースコード

<p>optionが入らない</p>
<select></select>
<br>
<br>
<p>optionが入る</p>
<select></select>

$(function () {
  let array = {
    1: 'たろう',
    2: 'はなこ',
    3: 'みか'
  };
  let options = $.map(array, function (name, id) {
    return $("<option>", {
      value: id,
      text: name
    });
  });

  $('select').map(function () {
    $(this).find("option").remove();
    $(this).append(
      $("<option>", { value: "", text: "選択してください" })
    );
    $(this).append(options);
    $(this).attr("disabled", false);
  });
});

Codepen: https://codepen.io/r_suzuki766/pen/XwLazE

Answer 1

appendを誤解しているからですね
最初のselectにappendされたoptionは次のselectにappendされたときに移動されます。
もし処理するならoptions配列内のoptionをcloneしてappendすることです。

<script>
$(function () {
  let array = {
    1: 'たろう',
    2: 'はなこ',
    3: 'みか'
  };
  let options = $.map(array, function (name, id) {
    return $("<option>", {
      value: id,
      text: name
    });
  });
  $('select').find("option").remove().end().append(
      $("<option>", { value: "", text: "選択してください" })
    ).prop("disabled", false);
  options.forEach(function(x){$('select').append(x.clone())});
});
</script>
<select></select>
<select></select>
<select></select>

修正版

cloneしなくてもeachやmapをしなければ行ける

  $('select').find("option").remove().end().append(
      $("<option>", { value: "", text: "選択してください" })
    ).append(options).prop("disabled", false);

Comments

[yambejp]

mapとかattrとかの使い方もおかしいところがあったので修正してあります

[R_suzuki766]

回答に加え修正まで丁寧にありがとうございます。こちらの方法で解決いたしました。
おっしゃる通りappendの仕様を誤解していました。ありがとうございます。

Answer 2

単に入れるだけならmapしなくてもいい気もしますが

$('select').find("option").remove();
$('select').append(
  $("<option>", { value: "", text: "選択してください" })
);
$('select').append(options);
$('select').attr("disabled", false);

Comments

[m.ts10806]

あ、解決でしたか。失礼。

[R_suzuki766]

解決済みにするのを忘れておりました。すいません。
map使う必要ないんですね…！ありがとうございます。

Answer 3

削除中・・・・・・・