色を選ぶselectboxを作成したい。

Question

###selectboxで色を選択するhtmlを作成しています。

背景色が設定された<option>要素を選択した際、選択された背景色を、
selectboxが縮んだ時も画面上に色を保持しておく良い方法はありますでしょうか。

最終的には、valueをトリガーに、データを呼び出した際、初期値として
色が選択された状態のselectboxを画面に表示させたいです。

<td>
　　<select name="COLOR">
　　　　<option value="1" style="background:RED;"></option>
　　　　<option value="2" style="background:GREEN;"></option>
　　　　<option value="3" style="background:BLUE;"></option>
　　　　<option value="4" style="background:YELLOW;"></option>
　　　　<option value="5" style="background:PINK;"></option>
　　</select>
</td>

乱文で失礼いたしますが、宜しくお願い致します。

※裏側では、apachPOIのIndexedColorを使っているので、実際のvalue値は異なります。

Comments

[m.ts10806]

質問内容からScalaとの関連性があまり見えなかったのですがこれは?

[takany]

すいません、playframeworkを利用していて、最終的にはscalaの要素も使うつもりで、タグを追加しました。質問に直接は関係ないので修正させていただきます。

[m.ts10806]

となると、クライアントサイド だけで完結できたらいいのか、DBなどサーバーサイドを絡めたいのかによって作り方がだいぶ違ってきます。そのあたりも要件として整理してタグ付けされたほうが的確な回答がつきやすくなります。

[takany]

今回はクライアント側で完結させたいと思っております。必要であれば、javascriptの利用も考えています。

Answer 1

こういうことでしょうか。

document.getElementById( 'a' ).addEventListener( 'change', ( event )=> {
	event.target.style.background = document.querySelector( '#a>option[value="' + event.target.value + '"]' ).style.background;
} );
```**動くサンプル：**[https://jsfiddle.net/p8kr5nq1/](https://jsfiddle.net/p8kr5nq1/)

Comments

[takany]

まさにこの動作です。サンプル付きで、イメージの齟齬がないことも確認できる回答だったので、ベストアンサーとさせていただきます。ありがとうございました。

Answer 2

クライアントサイドだけで完結させたいのでしたらlocalStorageという仕組みを利用すると良いです。
JavaScriptからブラウザ自体に情報を保管しておく仕組みです。プログラム側から、またはユーザーがデベロッパーツールで削除しない限り半永続的に情報が残り続けます。

Comments

[takany]

localStorageという仕組みという仕組みを知らないので、これを機に調べてみたいと思います。質問の仕方から丁寧に教えてくださり、ありがとうございました。

[m.ts10806]

「保持しておく」を「画面遷移、終了しても」と深追いした結果の回答なのでそのような要件が発生したときに参考にしてください

[takany]

mts10806様にご教示いただいた内容も必要になってくると思っております。
また質問させていただく際は、どうぞ宜しくお願い致します。