Help us understand the problem. What is going on with this article?

セレクトボックスを変更できないよう固定してかつ値も送信するjQueryプラグイン

More than 3 years have passed since last update.

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした