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

jQuery

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>

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

現在選択されている<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>

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

<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('追加する値'));で行えます。

先頭に追加したい場合は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を使います。

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

下記のサンプルでは、

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」だった場合処理を行う、という流れになるため、後から追加された要素も対応できます。


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

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

iOSブラウザのセレクトボックスUIが使い辛すぎ問題
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザー...

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

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

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

コメント

タイトルとURLをコピーしました