以下のようなHTMLがあるとする。

1
2
3
4
5
6
7
8
9
<select name="pref_cd" id="select-pref">
  <option value="">選択してください</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
  <option value="3">岩手県</option>
  <option value="4">宮城県</option>
  <option value="5">秋田県</option>
  ...
</select>

よくある都道府県選択欄で、値として整数の都道府県コードを持ち、テキストとして都道府県名を持ったselect要素だ。

先日、とある案件で、JavaScriptで都道府県名を変数として持っており、変数の値に一致するoption要素にselected属性を付与したいケースがあった。

option要素の値に都道府県名がセットされている場合は容易いのだが、値が整数コードとなっているとそう単純ではない。

今回はこのようなケースにおいて、option要素のテキスト部分と変数の値を比較して、マッチした要素にselected属性を付与する方法を紹介する。

filter関数を使う

JavaScriptのfilter関数を使うと良い。

1
2
3
4
var pref = '岩手県';
$('#select-pref option').filter(function(idx){
  return $(this).text() === pref;
}).prop('selected', true);

filter関数で全てのoption要素に処理をかけ、テキストと変数を比較する。

後はマッチした場合にpropメソッドでselected属性を設定すればOK。