[JavaScript] ボタン押下で動的に要素をコピーし追加(セレクトメニュー)

投稿者: | 2021年2月12日

前回の記事で、JavaScriptを用いて動的に要素をコピーし追加する方法について書きましたが、

単純に要素をコピーするだけだと、セレクトメニューの場合は上手くいきません。

セレクトメニューで値を選択し、その状態で要素を追加しても

このように、セレクトメニューだけは、値がデフォルトのままとなってしまいます。

セレクトメニューの場合は、コードの中に、値の部分も明示的にコピーする処理を付け加えておく必要があるわけです。

セレクトメニューの値を取得する

コピー元のセレクトメニューの値は、selectedIndex メソッドで取得できます。

今回の場合は、次のようなコードで取得可能です。

セレクトメニューの値を入れ替える

上記で取得しておいた、コピー元のセレクトメニューの値を、コピー先のセレクトメニューの値としてセットしておきます。

同じく selectedIndex メソッドでセットできます。

サンプルコード

追加した処理を含め、今回のサンプルコードはこのようになります。

 

上記の処理を追加することで、選択したセレクトボックスの値も

無事にコピーすることができました。