[JS] セレクトボックスの選択状態をJavaScriptから変更する方法

こんにちは、@yoheiMuneです。
本日はフロントエンドのネタで、HTMLのセレクトボックスの選択状態をJavaScriptで変更する方法を書きたいと思います。

Selectボックスの選択状態をJavaScriptから変更できない？

最近のお仕事でこんな要件がありました。

セレクトボックスの選択状態を覚えておき、次に同じ画面に訪問した際には以前の選択状態が復元されるようにする。

そしてそのときのアーキテクチャとして、サーバーとクライアントはAPIベースでのやり取りのみ（Full Ajax）な構造となっていたため、 セレクトボックスのレンダリングもJSが行う必要がありました。
その当時、こんなコードを書いてみたのですが、なぜかうまくSelectBoxの選択状態が変わらないという問題がありました。

// セレクトボックスを作る
var $select = $('<select name="sortKey"/>');
for (var i = 0; i < sortOptions.length; i++) {
  var sortOption = sortOptions[i];
  $select.append('<option value="'+sortOption.value+'">'+sortOption.name+'</option>');
}
$('#sortArea').append($select);

// セレクトボックスの初期状態を変更する
var preSortValue = getPreSortValue(); //LocalStorageなどから取得
$('option[value="'+preSortValue+'"]').attr('selected', 'selected');

上記のコードを書いてみたのですが、うまく選択状態が変わらない。 色々と調べてみるとJavaScriptからはセレクトボックスの選択状態の見た目を変更することは出来ないようです。
ということで今回は、こんな感じの方法で、セレクトボックスの選択状態をJSから変更することにしました。

JavaScriptからセレクトボックスの選択状態を変更する

生成された後のSelectBoxの選択状態は変えられないということなので、じゃあセレクトボックスの生成をJavaScriptでやってしまって、 その際に選択状態も指定すれば良いのではと思いました。
ということでこんなソースにしてみました。

/**
  セレクトボックスを指定された値に変更するメソッド
*/
function changeSelectBox(aValue) {
  
  // 今あるセレクトボックスは削除してしまう！
  $('#sortArea').empty();

  // セレクトボックスの内容を生成する。(JSRenderとかでやると便利)
  var $select = $('<select name="sortKey"/>');
  for (var i = 0; i < sortOptions.length; i++) {
    var sortOption = sortOptions[i];

    // 引数の値と一致していれば、選択状態にする
    if (sortOption.value === aValue) {
      $select.append('<option value="'+sortOption.value+'" selected>'+sortOption.name+'</option>');
    } else {
      $select.append('<option value="'+sortOption.value+'">'+sortOption.name+'</option>');
    }
  }
  $('#sortArea').append($select);


  // 新しく作ったセレクトボックスをHTMLヘレンダリング
  $('#sortArea').append($select);
}

だいぶ力技な感じですが、これで選択状態をJSから動的に変更できるようになりました。
他にもこんなやり方あるよーというお話、ありましたら教えて頂けると幸いです☆

最後に

今回のネタは、実際の案件で困ったお話からのネタでした。 セレクトボックスの状態を保持して、２回目以降に訪問してくれた際により便利に使ってもらいたいという要望。
サーバーサイドでの実装では良くやっていましたが、JSでやると困るとはと思い、ブログに記載しました。
どなたかの役に立てれば幸いです。

最後までご覧頂きましてありがとうございました。