jQueryでセレクトボックスの取得・代入・追加・削除・イベントまとめ【サンプル有】

2019年8月4日

Jqueryで扱うフォーム部品のセレクトボックスの操作についてまとめました。（プルダウンリストとも言います）

要素の指定ですが、class、id、nameそれぞれ、セレクタの指定方法が異なるので覚えておきましょう。

//class要素を取得
var text = $('.test1').val();
//id要素を取得
var text = $('#idtest1').val();
//name要素を取得
var text = $('[name="nametest1"]').val();

この記事ではすべてclass要素を取得する例として説明しております。

セレクトボックスに現在選択されている値を取得する

現在選択されている<select>要素の値の取得は、$('要素').val()で取得できます。

サンプルコード
<select class="test1">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<input type="button" class="button1" value="入力内容を取得する">

<script>
$(function(){
    //ボタンが押されたら選択内容をアラートで表示する
    $('.button1').click(function(){
        var text = $('.test1').val();
        alert(text);
    });
});
</script>

セレクトボックスの現在選択されている値を変更する

現在選択されている<select>の変更は、$('要素').val(変更したい値)で取得できます。

サンプルコード
<select class="test1_1">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<input type="button" class="button1_1" value="入力内容を選択肢3に変更する">

<script>
$(function(){
    //ボタンが押されたら選択肢3に変更する
    $('.button1_1').click(function(){
        $('.test1_1').val('3');
    });
});
</script>

セレクトボックスの現在選択されている値が何番目か取得する

現在選択されている<select>要素が何番目かは、$('要素').prop('selectedIndex')で取得できます。

先頭を0として数えますのでご注意ください。

サンプルコード
<select class="test2">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<input type="button" class="button2" value="入力内容を取得する">

<script>
$(function(){
    //ボタンが押されたら入力内容をアラートで表示する
    $('.button2').click(function(){
        var no = $('.test2').prop('selectedIndex');
        alert(no);
    });
});
</script>

何番目かを選択状態にしたい場合は、selectedIndexの第二引数に指定する

応用で、「セレクトボックスの〇番目を選択したい」といった場合は、$('要素').prop('selectedIndex', 数値)で設定できます。

こちらも0から数えて設定になりますのでご注意ください。（1の場合は上から2番目です）

$('.test2').prop('selectedIndex', 1);

セレクトボックスの現在選択されている値のテキストを取得する

現在選択されている<select>要素が何番目かは、$('要素 option:selected').text()で取得できます。

サンプルコード
<select class="test3">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<input type="button" class="button3" value="現在選択されているテキストを取得する">

<script>
$(function(){
    //ボタンが押されたら入力内容をアラートで表示する
    $('.button3').click(function(){
        var text = $('.test3 option:selected').text();
        alert(text);
    });
});
</script>

セレクトボックスの選択時にイベントを発火する

<select>要素を変更した際にイベントを実行したい場合は、$('要素').change(function(){処理})で行えます。

サンプルコード
<select class="test4">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>

<script>
$(function(){
    //ボタンが押されたら入力内容をアラートで表示する
    $('.test4').change(function(){
        var text = $(this).val();
        alert(text);
    });
});
</script>

イベントを引き起こした要素を取得できる$(this)を使用して、発生元の値をアラートしています。

参考 jQueryで$(this)の使い方【サンプルコード有】

セレクトボックスの内の値、テキストすべてを取得する

<select>要素の値、テキストをすべて取得したい場合は、$('要素 option').eachでoption内の要素を繰り返すことで取得できます。

下記の例は取得した値とテキストを配列に代入し、改行区切りのアラートで表示しています。

サンプルコード
<select class="test5">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<input type="button" class="button5_1" value="値をすべて取得する">
<input type="button" class="button5_2" value="テキストをすべて取得する">

<script>
$(function(){
    //値をすべて取得する
    $('.button5_1').click(function(){
        var aryCmp = [];
        $('.test5 option').each(function(key, value){
            aryCmp.push($(value).attr('value'));
        });
        alert(aryCmp.join("\r\n"));
    });
    //テキストをすべて取得する
    $('.button5_2').click(function(){
        var aryCmp = [];
        $('.test5 option').each(function(key, value){
            aryCmp.push($(value).text());
        });
        alert(aryCmp.join("\r\n"));
    });
});
</script>

セレクトボックスのoption要素を追加する（選択肢を追加）

<select>要素の最後に値を追加する場合は、$('要素').append($('<option>').html('追加する項目名').val('追加する値'));で行えます。

参考 jQueryで要素を先頭または末尾に追加する方法

先頭に追加したい場合はappendではなくprependに置き換えてください。

サンプルコード
<select class="test6">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>

<script>
$(function(){
    //末尾に追加
    $('.test6').append($('<option>').html('選択肢4').val('4'));
    //先頭に追加
    $('.test6').prepend($('<option>').html('選択肢0').val('0'));
});
</script>

セレクトボックスのoption要素を削除する（選択肢を削除）

<select>要素の中身を削除する場合、.removeを使います。

参考 jQueryで要素を空にするemptyと削除するremoveの使い方

削除先の指定方法はいくつか手段があるので、用途に応じてお使いください。

下記のサンプルでは、

n番目の要素を削除、最初の要素を削除、最後の要素を削除、選択されている要素を削除を試しています。

サンプルコード
<select class="test7">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
<option value="4">選択肢4</option>
<option value="5">選択肢5</option>
<option value="6">選択肢6</option>
<option value="7" selected="selected">選択肢7</option>
<option value="8">選択肢8</option>
<option value="9">選択肢9</option>
</select>

<script>
$(function(){
    //0から数えて4番目の要素を削除(選択肢5)
    $('.test7 option:eq(4)').remove();
    //最初の選択肢を削除(選択肢1)
    $('.test7 option:first-child').remove();
    //最後の選択肢を削除(選択肢9)
    $('.test7 option:last-child').remove();
    //現在選択されている要素を削除(選択肢7)
    $('.test7 option:selected').remove();
});
</script>

配列をセレクトボックスのoptionに設定する

配列の中身を<select>として設定したい場合は、配列の中身を繰り返しappendしましょう。

下記の例では、事前に入っているoption要素を全削除し、すべて配列に置き換えて表示しています。

サンプルコード
<select class="test8">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>

<script>
$(function(){
    $('.test8 option').remove();
    var aryCmp = [];
    aryCmp = ['りんご', 'みかん', 'ぶどう'];
    $.each(aryCmp, function(key, value){
        $('.test8').append($('<option>').html(value).val(value));
    });
});
</script>

後から（動的に）追加されたセレクトボックスにイベントを設定する

JavaScriptやAjaxからテキストボックスを生成した場合、要素を指定しても、事前に設定しておいたイベントは実行できません。

イベント設定時にその要素はまだ存在しなかったからです。

後から追加された要素にも設定したイベントを発火したい場合は、$(doument).onで実行しましょう。

サンプルコード
<div class="js_area"></div>
<script>
$(function(){
    //内容を変更したらアラートを実行（要素がないため、これは実行されない）
    $('.test9').change(function(){
        alert('changed!');
    });
    //内容を変更したらアラートを実行（documentの中から拾っているため、これは実行される）
    $(document).on('change', '.test9', function(){
        alert('changed!!!');
    });
    //js_areaにセレクトボックスを生成する
    $('.js_area').html('<select class="test9"><option value="1">選択肢1</option><option value="2">選択肢2</option><option value="3">選択肢3</option></select>');
});
</script>

こうすることで、document要素（要はページ全体）にイベントが設定され、それが「.test9」だった場合処理を行う、という流れになるため、後から追加された要素も対応できます。

2つのセレクトボックスを連動させる

1つ目のセレクトボックスを選んだら、その選択内容によって2つ目のセレクトボックスの候補を変更したい場合の処理です。

1つ目のセレクトボックスの値に応じて表示させたい候補を、2つ目のセレクトボックスの「data-sel」に設定し、eachによる繰り返し処理で判定を行います。

参考 jQueryのeachで配列や要素を繰り返す方法

サンプルコード
<select name="test10-1">
    <option value="0">選択してください</option>
    <option value="1">セリーグ</option>
    <option value="2">パリーグ</option>
</select>
<select name="test10-2">
    <option data-sel="0" value="0">リーグを選択してください</option>
    <option data-sel="1" value="1">ジャイアンツ</option>
    <option data-sel="1" value="2">ベイスターズ</option>
    <option data-sel="1" value="3">タイガース</option>
    <option data-sel="1" value="4">カープ</option>
    <option data-sel="1" value="5">ドラゴンズ</option>
    <option data-sel="1" value="6">スワローズ</option>
    <option data-sel="2" value="1">ライオンズ</option>
    <option data-sel="2" value="2">ホークス</option>
    <option data-sel="2" value="3">イーグルス</option>
    <option data-sel="2" value="4">マリーンズ</option>
    <option data-sel="2" value="4">ファイターズ</option>
    <option data-sel="2" value="4">バファローズ</option>
</select>

<script>
$(function(){
    //事前に2つ目のセレクトボックスの情報を取得しておく
    var targetSelect = $('[name="test10-2"]');
    var targetOption = targetSelect.find('option');
    
    //1つ目のセレクトボックスを選んだ場合
    $('[name="test10-1"]').change(function(){
        var sel = $(this).val();
        targetSelect.empty();
        targetOption.each(function(key, value){
            if($(value).data('sel') == sel){
                targetSelect.append(value);
            }
        });
        targetSelect.prop('selectedIndex', 0); //最初の候補を選択に変更
    });
    
    //リロード時対策
    $('[name="test10-1"]').trigger('change');

});
</script>

<select>はjQueryで操作しやすく、フォーム部品としてはよく使われる要素ですが、端末によっては使いづらいUIでもあります。

各端末別の仕様も把握しておきましょう。

iOSブラウザのセレクトボックスUIが使い辛すぎ問題

他のフォームのjQuery操作も合わせてご確認ください。

また、jQueryの各種イベントについても実行サンプルソース付きでまとめておりますので、こちらもご確認ください。

以上、jQueryでセレクトボックスの取得・代入・追加・削除・イベントまとめ、でした。

jQuery