jQuery select -> option要素の値を動的に変える

Question

下記の様なselect要素があり、value値には"@"区切りの複数の値を持たせています。
このvalue値のtrue/falseを動的に変えたいと考えています。

<select id="idSelect">
  <option value="val_1@false">text_1</option>
  <option value="val_2@true">text_2</option>
  <option value="val_3@false">text_3</option>
  <option value="val_4@false">text_4</option>
</select>

幾つか解決策を考えたのですが、良い書き方はあるでしょうか。
option要素は動的に追加、削除があります。

解決策1
optionにもidを持たせて、idで管理する。
コードがやや複雑化？

解決策2
value値を更新する。
シンプル？

解決策3
select要素と同じ状態の配列を内部に持つ。
option要素の追加・削除に合わせて配列を更新する必要があるので、見落としなどがある？

Answer 1

基本としてこの場合でしたら<select id="idSelect">の値がoptionのvalueになりますよね？
要するに「どれを選択しているか」がvalueですから、valueそのものを変化させるのは基本的に設計が悪いと言えるのではないでしょうか？

「内部」と言うのが何を指しているか分かりませんが、javascriptに変数を持たせる、もしくはinputのhiddenを作成して、valuechangeイベントなどで値を設定するのが分かりやすいストレートなやり方ではないでしょうか？

何にしてもどういう目的でこの操作がしたいのかが分からないとベストな方法かどうかは他人からはわからないって事になるかと思います。

Comments

[uer03108]

ご回答有難うございました。

<option value="id_1">text_1</option>

として、

var aryData["id_1"] = {para_1 : aaa, para_2 : bbb};

と配列にデータを格納することに致しました。

Answer 2

なにをもとにtrue/falseを書き換えるかにもよりますが
optionにidは相性がよくないかもしれません。
textで判断するか、data-*型でvalueのデフォ値（固定部分？）を
もっておいて、何かのトリガーでtrue/falseを付加して書き換えてはどうでしょう？

<select id="idSelect">
  <option value="val_1@false" data-val="val_1">text_1</option>
  <option value="val_2@true" data-val="val_2">text_2</option>
  <option value="val_3@false" data-val="val_3">text_3</option>
  <option value="val_4@false" data-val="val_4">text_4</option>
</select>

Comments

[uer03108]

回答有難うございました。
勉強になりました。
こういった方法があるのですね。
idの代わりにdata-valを使用するイメージでしょうか。