【保存版】jQueryでselect要素を思い通りに操作！サンプルコード付き

2024-05-17

jQueryでselect要素の選択を解除する方法

val()メソッドを使う

最もシンプルな方法は、val()メソッドを使って、選択状態を空文字に設定することです。

$(selector).val("");

この方法は、すべての選択肢を解除し、デフォルトの選択状態に戻します。デフォルトの選択状態が設定されていない場合は、何も選択されない状態になります。

prop()メソッドを使って、selectedプロパティをfalseに設定することもできます。

$(selector).prop("selected", false);

この方法は、個々の選択肢の選択状態を解除します。デフォルトの選択状態に影響を与えません。

find()メソッドとprop()メソッドを組み合わせる

特定の選択肢のみを解除したい場合は、find()メソッドとprop()メソッドを組み合わせて使用することができます。

$(selector).find("option[value='特定の値']").prop("selected", false);

この方法は、value属性が特定の値に一致する選択肢のみを解除します。

$(selector).attr("selected", false);

この方法は、prop()メソッドとほぼ同じですが、IE8などの古いブラウザでは互換性問題が発生する可能性があります。

使い分け

すべての選択肢を解除したい場合は、val()メソッドを使うのが最も簡単です。
IE8などの古いブラウザをサポートする必要がある場合は、prop()メソッドではなくattr()メソッドを使用します。

補足

上記のコード例は、すべてjQuery 1.4以降で使用できます。
複数のselect要素を解除したい場合は、$(selector).each(function() { ... }); を使ってループ処理することができます。

jQueryでselect要素の選択を解除するサンプルコード

<select id="mySelect">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>

<script>
$(document).ready(function() {
  $("#mySelect").val("");
});
</script>

このコードを実行すると、mySelectというIDを持つselect要素のすべての選択肢が解除され、何も選択されない状態になります。

<select id="mySelect">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>

<script>
$(document).ready(function() {
  $("#mySelect option").prop("selected", false);
});
</script>

<select id="mySelect">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>

<script>
$(document).ready(function() {
  $("#mySelect option[value='2']").prop("selected", false);
});
</script>

<select id="mySelect">
  <option value="1">選択肢1</option>
  <option value="2">選択肢2</option>
  <option value="3">選択肢3</option>
</select>

<script>
$(document).ready(function() {
  $("#mySelect option").attr("selected", false);
});
</script>