Get text from a select within a javascript foreach

Question

Get text from a select within a javascript foreach

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Good afternoon

Personal I have a select that dynamically adds row to row within a table, but my code only takes the text from the first row. I would like to get the text according to the line and move to an input hidden.

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 THE SELECT

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

ERROR

TABLE(THISINSIDEASEARCHMODE)

<tableid="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>

TABLE MAIN PAGE (RECEIVE 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>

javascript

asked by anonymous 26.11.2018 / 17:41

2 answers

1

You can do 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);
}

26.11.2018 / 17:47

How to upload multiple images with just 1 click? Find values in JSON by multiple keys

score 2 · Accepted Answer

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've created an example where I use classes to select input that is in the same tr of select clicked using the jQuery.closest() along with jQuery.find() and HTMLSelectElement.selectedIndex (read-only).

Since <select> is dynamically inserted you can make use of event delegation . I explain better about event delegation in the question: Difference between 'click', 'bind', 'live', 'delegate' , 'trigger' and 'on'? .

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><buttonid="add-row">Add</button> <br>

<hr>

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