セレクトボックスの内容を固定したい

例えば以下のようなフォームがあるとします。

sample.html

<select name="heater">
  <option value="staub">石油ストーブ</option>
  <option value="aircon">エアコン</option>
  <option value="kotatsu">こたつ</option>
</select>

<select name="fruit">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="grape">ぶどう</option>
</select>

上のセレクトボックスで「こたつ」が選ばれたら、下の方で「みかん」を選択したいときの処理を jQuery で書くと以下のようになります。

sample.js

$(function() {
  $("select[name='heater']").change(function() {
    if( $(this).val() == 'kotatsu' ) {
      $("select[name='fruit']").val("orange");
    }
  });
});

しかしこのままだと「みかん」は選ばれてるけど勝手に「りんご」とかに変更できてしまいます。
こたつにはみかんだろ！

というわけで変更できないようにします。

sample.js

$(function() {
  $("select[name='heater']").change(function() {
    if( $(this).val() == 'kotatsu' ) {
      $("select[name='fruit']").val("orange");
      $("select[name='fruit']").attr("disabled", true);
    } else {
      $("select[name='fruit']").removeAttr("disabled");
    }
  });
});

これで無事に変更できなくなりましたが、disabled 属性を付けたので値が送信されなくなってしまいました。
これは困った。

readonly 属性はセレクトボックスには効かないし。。

この問題を解決する方法としては、hidden フィールドを用意するなどのやり方があるようです。

でも今回はできれば追加でフィールドは増やしたくない。
さてどうしようか。

それ、jQuery プラグインでできるよ

ふと思い立って jQuery プラグインを探してみる。
ググってもそれらしきものは見つからなかったので、Github で検索してみる。
そしたらあった。

ソースを見ると、mousedown とか keydown とかを無効にしてますね。
ブラウザも一通り対応してるっぽい。

Work with Firefox, Chrome, IE 8+, Opera and Safari.

そんなわけで jquery.selection.js ファイルを読み込む処理を追加して、以下のコードで完成。

sample.js

$(function() {
  $("select[name='heater']").change(function() {
    if( $(this).val() == 'kotatsu' ) {
      $("select[name='fruit']").val("orange");
      $("select[name='fruit']").disableSelection();
    } else {
      $("select[name='fruit']").enableSelection();
    }
  });
});

hidden フィールドなどを増やすことなく、無事にセレクトボックスを固定して値の送信もできるようになりました。
めでたしめでたし。