セレクトボックスで選択した値を隣のテキストボックスに表示させたい

Question

セレクトボックスで選択した値をテキストボックスに表示させたいのですが、
テキストボックスのidにphpの変数が入っているため書き方がわかりません…

javascriptのコードの4行目の("purpose[$i]")の部分が違うことはわかっているのですが、
var a = <?php echo $i; ?>;　などphpの変数を入れられる？などの情報は見つかっても、
こういったパターンの情報が出てこず質問させていただきました。

説明不足、至らない点があると思いますがヒントをいただければ幸いです。

<?php 
 echo '<tr>';
  for($i = 1; $i <= 5; $i++){
    echo '<td>'.$i.'</td>';
	echo '<td><select style="width:15%" class="koutsu-month" id="purpose_select" onchange="myfunc()">';
	echo '<option></option>';
	foreach($purpose_list as $purpose){
	  echo '<option value="'.$purpose.'">'.$purpose.'</option>';
	}
	echo '</select><input class="koutsu-textbox form-control-sm" style="width:85%" type="text" value="" id="purpose['.$i.']">
  </td>';
?>

<script type="text/javascript">
   function myfunc(){
      var selectPurpose = document.getElementById("purpose_select").value;
      document.getElementById("purpose[$i]").value = selectPurpose;
   }
 </script>

Answer 1

selectのIDpurpose_selectが複数できていますので、これも変更。

 echo '<td><select style="width:15%" class="koutsu-month" id="purpose_select['.$i.']" onchange="myfunc('.$i.')">';

とmyfunc(n)で何番目の処理をするかを明示し、

   function myfunc(id){
      var selectPurpose = document.getElementById("purpose_select["+id+"]").value;
      document.getElementById("purpose["+id+"]").value = selectPurpose;
   }

もうちょっとスマートにかける気もしますが。

Comments

[sasamichan]

教えていただきありがとうございました！
purpose_selectのところまで記述していただき無事思い通りにできました。

Answer 2

PHP はあまり詳しくないですが、JavaScript の知識で回答します（もしかしたらもっといい方法があるかもしれません）。
結論を述べると、JavaScript の関数として定義されている myfunc の引数を使って渡せばいいかと思います。

echo '<td><select style="width:15%" class="koutsu-month" id="purpose_select" onchange="myfunc('.$i.')">'

function myfunc(i){
  var selectPurpose = document.getElementById("purpose_select").value;
  document.getElementById("purpose[" + i + "]").value = selectPurpose;
}

また、このコードだと、id が purpose_select なセレクトタグがいくつも生成されるのであまりよくありません。
セレクトタグの id も $i の変数を含めた方がいいかと思います。

Comments

[sasamichan]

教えていただいた内容でできました！
お力を貸していただきありがとうございました！

Answer 3

JavaScriptで兄弟要素取得してそのidを使えば良いのでは。

DOM操作となるのであくまでブラウザに表示されたHTMLをベースに考えてください。
ブラウザに表示された時点でPHPの役目は終わっています。

Comments

[sasamichan]

ＤＯＭ操作！恥ずかしながら初めて聞きました…
調べてみます、ありがとうございます！

[m.ts10806]

「JavaScriptで操作しやすいようなHTML出力」を心がけたら良いかと