Get text from a select inside a javascript foreach

Question

Good afternoon

I have a select that dynamically adds row by row within a table, but my code only takes the text from the first line. I would like to take the text according to the line and pass to an Hidden input.

MY DYNAMIC SELECT

  '<td>'+
      '<select name="idcentrocusto[]" id="selectOption" onchange="getSelect();">'+
        '<option value="">Selecione Centro Custos...</option>'+
        '<?php foreach ($centrocustos as $c){?>'+
        '<option value="<?php echo $c->idcentrocusto?>">'+
          '<?php echo $c->centrocusto?>'+
        '</option>'+
        '<?php } ?>'+
      '</select>'+
    '</td>'+

FUNCTION WHEN CHANGING SELECT

function getSelect() {
 var vai=$('#selectOption option:selected').html();
 $('#centrocusto').attr('value', vai);
}

ERROR

TABLE (THIS INSIDE A SEARCH MODAL)

  <table id="mytable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Id</th>
        <th>Un</th>
        <th>Produto</th>
        <th>Código</th>
        <th>Qnt*</th>
        <th>Delhamento Produto</th>
        <th>...</th>


      </tr>
    </thead>
    <tbody>
       <?php foreach ($produtos as $produto){?>
      <tr>
        <td id="id"><?php echo $produto->idproduto?></td>
        <td id="un"><?php echo $produto->un?></td>
        <td id="produto"><?php echo $produto->produto?></td>
        <td id="codigo"><?php echo $produto->codigo?></td>
        <td><input style="max-width: 55px" class="form-control" id="qnt" type="text" name="qnt[]"  onkeypress="return event.charCode >= 48 && event.charCode <= 57"></td>
        <td><input style="width: 100%" class="form-control" id="detalhe" type="text" name="detalhe"></td>
        <td><button class="add glyphicon glyphicon-plus img-circle text-primary btn-icon"></button></td>
      </tr>

      <?php } ?>
    </tbody>
  </table>

MAIN PAGE TABLE (RECEIVES SEARCH DATA)

<table id="tab" class="table table-striped table-bordered" >
                    <thead>
                      <tr>
                        <th id="tab_cab">Produto</th>
                        <th id="tab_cab">Qnt</th>
                        <th id="tab_cab">Detalhar Produto</th>
                        <th id="tab_cab">Centro de Custo</th>
                        <th id="tab_cab">...</th>

                      </tr>
                    </thead>
                   <tbody id="mytbody">

                    </tbody>
                    <tfoot>
                         <th>Total de Itens: <span id="counter"></span></th>
                         <th style="text-align: center;"> <span id="total"></span></th>
                         <th></th>
                    </tfoot>
                </table>

Answer 1

The id should be unique in a document if you need to use multiple elements with the same id probably what you want is to use classes.

I created an example where I use classes to select the input that is in the same tr of select clicked using the method jQuery.closest() together with the method jQuery.find() and the property HTMLSelectElement.selectedIndex (read-only).

How the <select> are inserted dynamically you can make use of delegation of events. I explain better about delegation of events in the question: Difference between click, bind, live, delegate, Trigger and on functions'?.

---

Example:

var $tbody = $('#table-body')
var row_template =  `
<tr>
  <td>
    <select name="idcentrocusto[]" class="select-custos">
      <option value="">Selecione Centro Custos...</option>
      <option value="1">Opção 1</option>
      <option value="2">Opção 2</option>
      <option value="3">Opção 3</option>
    </select>
  </td>
  <td>
    <input type="text" class="custo" readonly>
  </td>
</tr>
`

// Ao clicar no botão, adiciona mais uma linha
$('#add-row').on('click', function() {
  $tbody.append(row_template)
})

// Delega o evento de change dos selects ao <tbody>
$tbody.on('change', '.select-custos', function () {
  // Pega o texto da opção escolhida
  var selected_text = this.options[this.selectedIndex].text
  // Pega o input correspondente ao select clicado
  $(this).closest('tr').find('.custo').val(selected_text)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add-row">Add</button> <br>

<hr>

<table>
  <tbody id="table-body">
  </tbody>
</table>

Answer 2

You can do it like this:

'<td>'+
  '<select name="idcentrocusto[]" onchange="getSelect(this);">'+
    '<option value="">Selecione Centro Custos...</option>'+
    '<?php foreach ($centrocustos as $c){?>'+
    '<option value="<?php echo $c->idcentrocusto?>">'+
      '<?php echo $c->centrocusto?>'+
    '</option>'+
    '<?php } ?>'+
  '</select>'+
'</td>'+


function getSelect(obj) {
 var vai= obj.value;
 $('#centrocusto').attr('value', vai);
}