Skill Note

平凡なエンジニアがメモ代わりにプログラミング, インフラ, ネットワークを書き綴るブログ

[jQuery]セレクトボックスを操作する方法

      2020/01/09

jQueryでセレクトボックスを操作する

セレクトボックスの値を参照したり、任意の値を選択状態にするなど、jQueryを使用したセレクトボックスの操作方法を記載します。

最初に操作対象のセレクトボックスを作成します。

<select id="select1">
  <option value="key1">VAL1</option>
  <option value="key2">VAL2</option>
  <option value="key3">VAL3</option>
  <option value="key4">VAL4</option>
</select>

セレクトボックスの要素を取得する

現在選択されているセレクトボックスのValue値はval()で取得します。

<script>// <![CDATA[
$(function(){
  var val = $('#select1').val();
});
// ]]></script>

現在選択されているセレクトボックスのテキストはtext()で取得します。
テキストを取得するには、option:selectedを指定します。
指定しない場合は、全てのテキストが取得されます。

<script>// <![CDATA[
$(function(){
  var val = $('#select1 option:selected').text();
});
// ]]></script>

全ての要素を取得するには、children()で全ての要素を取得後に、for文などで1つずつ取り出します。

<script>// <![CDATA[
$(function(){
  var op = $('#select1').children();
  for(var i = 0; i < op.length; i++) {
    var val = op.eq(i).val();
    var str = op.eq(i).text();
});
// ]]></script>

セレクトボックスの要素を選択状態にする

要素を選択状態にするには、.val()の引数にValue値を指定します。

<script>// <![CDATA[
$(function(){
  // key3の要素を選択状態にする
  $('#select1').val("key3");
  // changeイベントまで実行する場合
  // $('#select1').val("key3").change();
});
// ]]></script>

セレクトボックスの要素を追加する

要素を追加するには、.append()の引数にオプション要素を指定します。

<script>// <![CDATA[
$(function(){
  // key5の要素を追加
  $('#select1').append('<option value="key5">VAL5</option>');
});
// ]]></script>

セレクトボックスの状態を取得する

セレクトボックスが有効か無効かの状態を取得するには、.enabledセレクターで判定します。

<script>// <![CDATA[
$(function(){
  if($('#select1').is(':enabled')) {
    // 有効の場合
  }else{
    // 無効の場合
  }
});
// ]]></script>

Google AdSense PC

Google AdSense PC

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

program
Webサービス WebAPIの作り方

ASP.NET(C#)でWebサービスを作成する この記事ではVisual StudioでSOAP形式のWebサービスを作成する方法について記載します。 Vis …

Visual Studio CodeでVBAの開発環境を構築する

普段利用するテキストエディタはVisual Studio Code(VSCode)を利用していますが、VSCodeではVBAのデバッグを行うことができず、VBA …

program
VMware ESXiにSSH接続してコマンドを実行する方法

SSH接続の設定手順 ESXiはSSH接続した端末から、ゲストOSの起動やVMの作成などのコマンドを実行することができます。 デフォルトの設定ではSSHが無効に …

program
Webサービス Web APIのまとめ

Webサービス Web APIを調べる Webサービス、Web APIについて調べた結果を簡単にまとめました。 Webサービス、Web APIとは HTTPなど …

program
[Soap UI]プロパティの使い方

Soap UIでプロパティを使用したテスト Soap UIではSOAPリクエスト内のデータはプロパティによって置き換えることができ、リクエスト送信などをトリガー …

program
[Soap UI]Webサービスのテストツール

Soap UIでWebサービスをテストする 今回の記事ではWebサービスのテストツールSoap UIの簡単な使い方を記載していきます。 Soap UIとは So …