Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@inaling

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

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

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

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
20
Help us understand the problem. What are the problem?