可変値が含まれるid名からselectされた値を取得する

Question

Cakephp2
Php7系
以下のようにfor文でselectを出力しています。
selectのid値は自動で付与されているようで、「FruitVal1」と出力されています。
これが5つ、FruitVal1、FruitVal2、FruitVal3、FruitVal4、FruitVal5と出力されています。

    <?php echo $this->Form->create('Fruit', ['novalidate' => true]); ?>
	<?php for ($c = 1; $c <= 5; $c++) { ?>
          <?php
          $list_num_apple = ['a' => 1, 'b' => 2,'c' => 3,'d' => 4,];
          echo $this->Form->select(
          "val_{$c}",
          $list_num_apple,
          );
     ?>

			}

後ろの値が変化しているため、単純日getelementbyidしようとしても取れません。

この場合どうすれば、selectで選んだ値が取得できますか？
少し書いてみましたが、うまくいかず...。

		// var i = 1;
		// while ($('#FruitVal' + i) < 5) {
		// 	var val = $('#FruitVal' + i).val();
		// 	console.log(val)
		// 	i++;
		// }

Comments

[yambejp]

PHP側で「ToiawaseSubjects」が指定されているようには見えませんが

[momolength]

失礼しました。貼り付け時のミスです。

[yambejp]

どのタイミングでvalを表示したいのでしょうか？
selectをチェンジするたびですか？
なにかトリガー用のボタンがあるのでしょうか？

[momolength]

一旦console.logで取得するところまで考えてました。
>selectをチェンジするたびですか？
こっちですね。

やりたいこととしては、selectをチェンジするたびに、隣のselectの中身を変えたいためです。
まずは、今selectで何を選んでいるか、をjsで取得したいです。
すいません、よろしくお願いします。

Answer 1

ざっくりこんな感じで

<script>
$(function(){
  $('select').on('change',function(){
    console.log($('select[id]').filter(function(){
      return /^FruitVal[1-3]$/.test($(this).attr('id'));
    }).map(function(){
      return $(this).val();
    }).get());
  });
});
</script>
<select id="FruitVal1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="FruitVal2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="FruitVal3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="FruitValX">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Comments

[yambejp]

1-5に読み替えて処理してください

[momolength]

ありがとうございます。
正直何やってるかわからないので、じっくり読み解いていきます。

セレクトがチェンジされたら、指定のidのセレクトを探して取得、そのあとvalをreturnしているってことですか？

[momolength]

空が返ってきますね...。
申し訳ありませんが、簡単に解説していただけないですか？

[yambejp]

まずphpとjsの問題点を切り分けてください
phpでHTMLを出力するならまずはHTMLを確定してください
その上でhtmlに対してjsを適用できるか確認する流れです

HTMLの部分は私の例示したもので間違いないですか？
であれば空が返ってくることはありません

[momolength]

大変失礼しました。
やっと理解できました。
console.log($('select[id]').filter(function(){
return /^FruitVal[1-3]$/.test($(this).attr('id'));
ここのselectの部分の記述が貼り付けミスにより間違っていました。

ご邸内にありがとうございました。とても勉強になりました。