【JavaScript】複製したセレクトボックスの値が変わらない

Question

前提・実現したいこと

以下サンプルコードです。
https://codepen.io/dadada-dadada/pen/jOBOzVw?editors=1010

ボタンをクリックしたらセレクトボックスが複製する処理を作っています。

前提条件：
・セレクトボックスの値の初期値は空の場合もあれば選択されている場合もある
・jQueryは使わない

セレクトボックスを何も操作しないで、複製ボタンをクリックしたら、選択されている内容とvalueが正しく表示されます。
しかし、セレクトボックスの選択肢を変えて複製ボタンをクリックしたら、変える前のoptionが選択されており、さらにvalueも変わりません。

何が原因なのでしょうか？

---

サンプルの複製される要素の期待値としては以下のとおりです。

何も操作しないで複製ボタンをクリックする
・111が選択される
・テキストがselectのvalue: 111になる

222を選択して複製ボタンをクリックする
・222が選択される
・テキストがselectのvalue: 222になる

Comments

[m.ts10806]

コードはなるべく質問本文に記載してください。
※もし長いなら最小構成の再現可能なコードを改めて組みなおすと良いです（参考：https://teratail.com/help/question-tips#questionTips3-5-1）

Answer 1

仕様なの不具合なのかはわかりませんが、現実は下記のように回避するしかないようですね。
select - Javascript clone node is not copying all values from cloned to new object - Stack Overflow

ブラウザ依存でもあるのかもしれません。
古い記事ですが参考までに。
JavaScriptの動かないコード (中級編) cloneNodeで選択状態が変わるエラー - 主に言語とシステム開発に関して

Comments

[true_colors_20]

Stack Overflowの方法で解決しました。ありがとうございました。

Answer 2

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('button').addEventListener('click',()=>{
    const newSel=document.querySelector('#base').cloneNode(true);
    const idx=document.querySelector('#base').selectedIndex;
    newSel.removeAttribute("id");
    newSel.selectedIndex=idx;
    document.querySelector('#output').appendChild(newSel);
  });
});

Comments

[true_colors_20]

selectedIndexで選択するのですね。参考になりました。ありがとうございました。

Answer 3

複製先のセレクトボックスの値に、複製元のセレクトボックスの値をセットすればよいと思うのですが、どうでしょうか？

function elmClone(){
	var output = document.querySelector('#output');
	var select = document.querySelector('#base');
	var selectClone = select.cloneNode(true);
	var createElm = document.createElement('div')
	selectClone.value = select.value;
	createElm.textContent = selectClone.value
	output.appendChild(createElm);
	output.appendChild(selectClone);
};