【JavaScript】選択値を維持したままセレクトボックスを複製する方法

知っていればなんて事ないですが、知らないと躓くポイントになるのでメモしておきます。

cloneNodeでHTML要素（ノード）を複製できます。ですが、複製対象をセレクトボックスとした場合、考えなしに複製すると、セレクトボックスの選択値がリセットされて複製されてしまいます。

developer.mozilla.org

次の例を見てください。ボタンを押すとセレクトボックスが複製されるスクリプトです。フシギダネやイーブイを選択した状態でボタンを押しても、コピーされたセレクトボックスはピカチュウが選択されています。

サンプル

ピカチュウ フシギダネ イーブイ コピー！

コード

<select id="pokemon">
  <option>ピカチュウ</option>
  <option>フシギダネ</option> 
  <option>イーブイ</option>
</select>
<button type="button" onclick="duplicate()">コピー！</button>
<div id="addArea"></div>

<script>
  function duplicate(){
    var copy = document.getElementById("pokemon").cloneNode(true);
    document.getElementById("addArea").appendChild(copy);
  }
</script>

対処方法

選択値を維持しつつ複製するには、複製元のselectタグのvalueを、明示的にセットしてやると上手くいきます。

以下のサンプルで、フシギダネを選んだ状態でボタンを押すと、フシギダネが選択されたセレクトボックスが複製されるかと思います。

サンプル

ピカチュウ フシギダネ イーブイ コピー！

コード

<select id="pokemon2">
  <option>ピカチュウ</option>
  <option>フシギダネ</option> 
  <option>イーブイ</option>
</select>
<button type="button" onclick="duplicate2()">コピー！</button>
<div id="addArea2"></div>

<script>
  function duplicate2(){
    var copy = document.getElementById("pokemon2").cloneNode(true);
    // 複製元のvalueをセット
    copy.value = document.getElementById("pokemon2").value
    document.getElementById("addArea2").appendChild(copy);
  }
</script>