【jQuery】セレクトボックスが複数ある場合、選択しているvalue値と表示名をそれぞれ取得する

表示ボタンを押すと、セレクトボックス2つがそれぞれ選択しているvalue値と表示名を取得してconsoleに表示するサンプルです。

動作サンプル

動作サンプル

コード

テーブル各行についているセレクトボックスから、データを取得する方法を説明するのがちょっと難しいなと思ってとりあえず書きました。

・セレクトボックス自体に同一のクラスをつける
・ボタン押下時にそのクラスをセレクタに指定してまるごと取得
・eachで各要素をループ
・各要素で選択したvalue値・表示名を出力する

という書き方になっています。

<select class='sel'>
    <option value='higashi'>東</option>
    <option value='nishi'>西</option>
    <option value='minami'>南</option>
    <option value='kita'>北</option>
</select>
<br />
<select class='sel'>
    <option value='up'>上</option>
    <option value='down'>下</option>
    <option value='left'>左</option>
    <option value='right'>右</option>
</select>
<br />
<script>
$(function() {

    //subボタンクリック時の動作
    $('#sub').click(function() {

          //selクラスがある要素をループ
          $('.sel').each(function(index, element){

              //選択されているvalue値の取り出し
              console.log($(element).val());

              //選択されている表示名の取り出し
              console.log($(element).find('option:selected').text());
          })
    });
});
</script>

<input type="button" id="sub" value="表示">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

おわり。