ページ内に複数あるセレクトボックスの値をjQueryで取得したい。

Question

ページ内に複数あるセレクトボックスの値をjQueryで取得したい。

HTMLで作成しているフォーム内に複数あるセレクトボックスの値を
各、セレクトボックス毎に取りたいと思っています。

現状は問題切り分けのためにセレクトボックス２の値しかconsole.logしてませんが
最終的には全てのセレクトボックスの値を別々に取得したいです。

以上宜しくお願いします。

発生している問題・エラーメッセージ

セレクトボックス１・セレクトボックス２・セレクトボックス３があり

セレクトボックス２の値を取ろうとしました、、

しかし、ブラウザのコンソールのログで確認したところ、
なぜかセレクトボックス２の項目を選んだ時に、セレクトボックス１の値が取られてしまう。

該当のソースコード

	<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
	
	<select id="a222" name="test">
				<option>セレクトボックス１</option>
				<option value="A1">項目１の１</option>
				<option value="A2">項目１の２</option>
				<option value="A3">項目１の３</option>
	</select>

	<select id="b222" name="test2">
		<option>セレクトボックス２</option>
		<option value="B1">項目２の１</option>
		<option value="B2">項目２の２</option>
		<option value="B3">項目２の３</option>
	</select>
	
	<select id="c333" name="test3">
		<option>セレクトボックス３</option>
		<option value="C1">項目３の１</option>
		<option value="C2">項目３の２</option>
		<option value="C3">項目３の３</option>
	</select>

   <script type="text/javascript">
   	$('[name=test2]').change(function() {
   	    var k2 = $('option:selected').val();
   	    console.log(k2);
   	})
   </script>

試したこと

$('[name=test2]').change(function() {
を
$('select#b222').change(function() {
などのID指定してみましたがうまくいきませんでした、、

補足情報（FW/ツールのバージョンなど）

確認環境
MAMP 5.2
osx 10.14 Safari バージョン12.0.2

Answer 1

$('option:selected').val();

これはすべてのoptionの中でselectedされた最初の要素のvalueなので
当然セレクトボックス１が拾われます
あえて同じロジックで考えるなら

$(this).find('option:selected').val();

ですが実質$(this).val()が正解です。

$(function(){
  $('[name=test2]').on('change',function() {
    var k2 = $(this).val();
    console.log(k2);
  });
});

Comments

[bataman]

こんにちは
はじめまして。

ありがとうございます！

実質、実用的な？jsを自力で初めて組み始めて、何もわからないまま早速つまづいてしまいました。

$(this).val(); で[name=test2]の値に限定することができるのですね！
ありがとうございます、勉強になります。

.on()もまだ理解できませんが、色々な値やイベント等を複数含ませることができるっぽですね（理解が追いつきませんが、、）

$(function(){
});
これはどんな機能があるんでしょうか？ググってみましたが少しよくわかりません、、

[yambejp]

$(function(){．．．});
は、ページのdomが構築されたあとに処理をするものです
質問者さんはhtmlの後半にscriptを書く必要がありましたが
これを使うと前半部分にまとめることができます
（jsを外部ファイル化するときなどに有効）

[bataman]

なるほど！
そう言うことなのですね、ありがとうございます。
よくある外部化等行うのに使えるんですね

Answer 2

イベントを設置するのは複数に付ければ良いのですが、
発火した時はこのセレクトボックスという意味を含めたthisを起点にすると良いでしょう。
http://js.studio-kingdom.com/jquery/events/change

$("input[type='text']").change( function() {
  // $(this).val() で値を参照することができます。
});

こんな風に$(this)で包んでしまって、
.attr('name')の値がtest2だったらこんなふうにする
…などといった記述を書いていけば質問文のやりたいことを実現出来るんじゃないかと思います。

Comments

[bataman]

こんにちははじめまして

.attr()なんてものもあるんですね。
はじめてのjsで全くわからないことばかりですが、一度.attr()の方もみてみようかと思います。

ありがとうございます！

Answer 3

var k2 = $('option:selected').val();
を
var k2 = $(this).val();
でとれると思います。

$('option:selected').val();だと全体の中でselectedされているものの値をとってくるようになってしまうと思います。
$(this).val();は、changeが発動したものの中で選択中の値をとります。

Comments

[bataman]

こんにちは
はじめまして

yambejpさんもおっしゃるように、$(this).val();の部分がミソなんですね。
はじめてjsで作り始めて早速つまづいてしまいました。

非常に分かりやすい説明ありがとうございます！
勉強する手がかりになりそうです。

Answer 4

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

	
	<select id="a222" name="test">
		<option value="A1">項目１の１</option>
		<option value="A2">項目１の２</option>
		<option value="A3">項目１の３</option>
	</select>
	<select id="b222" name="test2">
		<option value="B1">項目２の１</option>
		<option value="B2">項目２の２</option>
		<option value="B3">項目２の３</option>
	</select>
	
	<select id="c333" name="test3">
		<option value="C1">項目３の１</option>
		<option value="C2">項目３の２</option>
		<option value="C3">項目３の３</option>
	</select>
	

<script type="text/javascript">
	$(function(){
			$('[name=test]').change(function() {
				    var k1 = $(this).val();
				    console.log(k1);
//					処理内容
			})
			.trigger('change');
			
		   	$('[name=test2]').change(function() {
		   	    var k2 = $(this).val();;
		   	    console.log(k2);
//					処理内容
		   	})
		   	.trigger('change');
		   	
		   	$('[name=test3]').change(function() {
		   	    var k3 = $(this).val();
		   	    console.log(k3);
//					処理内容
		   	})
		   	.trigger('change');
   	});
</script>

.trigger('change');を追加し、項目の初期値を読めるようにしました。
$(function(){});も追加し、外部ファイル化できるようにしました。
皆様ありがとうございます。

Answer 5

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
	
	<select id="a222" name="test">
		<option value="A1">項目１の１</option>
		<option value="A2">項目１の２</option>
		<option value="A3">項目１の３</option>
	</select>
	<select id="b222" name="test2">
		<option value="B1">項目２の１</option>
		<option value="B2">項目２の２</option>
		<option value="B3">項目２の３</option>
	</select>
	
	<select id="c333" name="test3">
		<option value="C1">項目３の１</option>
		<option value="C2">項目３の２</option>
		<option value="C3">項目３の３</option>
	</select>

<script type="text/javascript">
	$(function(){
			$('[name=test]').change(function() {
				    var k1 = $(this).val();
				    console.log(k1);
//					処理内容
			})
			.trigger('change');
			
		   	$('[name=test2]').change(function() {
		   	    var k2 = $(this).val();;
		   	    console.log(k2);
//					処理内容
		   	})
		   	.trigger('change');
		   	
		   	$('[name=test3]').change(function() {
		   	    var k3 = $(this).val();
		   	    console.log(k3);
//					処理内容
		   	})
		   	.trigger('change');
   	});
</script>

セレクトボックスの初期値を反映させるために.trigger('change');を追加
外部ファイル化が行えるように$(function(){で囲んでみました。
皆様ありがとうございました。