0

Tenho um combobox e uma tabela:

Gostaria que toda vez que ao clicar na tabela, selecionasse o item no combobox de acordo com o click.

Segue exemplo do problema.

Tentar clicar diversas vezes, na tabela. No início até funciona, depois para de funcionar.

var setores = [
 {"id":"1", "setor":"Recepcao"},
 {"id":"2", "setor":"Pronto Socorro"},
 {"id":"3", "setor":"Unidade de Internacao"}
];

    preencherComboBox();
    preencherTabela();


function preencherComboBox(){
  var combo = $('.select');
      $.each(setores, function(i, setor){
        combo.append($('<option>',{
          value : setor.id,
          text  : setor.setor
        }));
      }); 
}

function preencherTabela(){
   var tbody = $('.tbody');
      $.each(setores, function(i, setor){
        var linha = "<tr>"
                      +"<td>"+setor.id+"</td>"
                      +"<td>"+setor.setor+"</td>"
                    +"</tr>";
        tbody.append(linha);
      }); 
}


$('.tbody tr').on('click',function(e){
  var tableData = $(this).children("td").map(function()         {
                    return $(this).text();
                }).get();
                
  var setor =  $.trim(tableData[0]) ;
  $('.select option[value='+setor+']').attr('selected','selected');
   
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<div class="form-group ">
<label>Itens</label>
<select class="form-control select col-lg-2"></select>
</div>

<table class="table table-responsive table-hover">
  <thead>
     <th>ID</th>
     <th>Setor</th>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

2 Respostas 2

2

Fiz algumas modificações no código, acredito que assim funcione do modo desejado:

var setores = [
 {"id":"1", "setor":"Recepcao"},
 {"id":"2", "setor":"Pronto Socorro"},
 {"id":"3", "setor":"Unidade de Internacao"}
];

    preencherComboBox();
    preencherTabela();


function preencherComboBox(){
  var combo = $('.select');
      $.each(setores, function(i, setor){
        combo.append($('<option>',{
          value : setor.id,
          text  : setor.setor
        }));
      }); 
}

function preencherTabela(){
   var tbody = $('.tbody');
      $.each(setores, function(i, setor){
        var linha = "<tr class='linha'>"
                      +"<td>"+setor.id+"</td>"
                      +"<td>"+setor.setor+"</td>"
                    +"</tr>";
        tbody.append(linha);
      }); 
}


$('.linha').click(function(){
  var tableData = $(this).children("td").map(function()         {
                    return $(this).text();
                }).get();
                
  var setor =  $.trim(tableData[0]) ;
  $('#setor').val(setor);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<div class="form-group ">
<label>Itens</label>
<select id="setor" class="form-control select col-lg-2"></select>
</div>

<table class="table table-responsive table-hover">
  <thead>
     <th>ID</th>
     <th>Setor</th>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

Basicamente fiz o seguinte: 1º Defini a class denominada 'linha' para as tags tr (linhas da tabela); 2º Defini um id para o select; 3º Configurei o script para que, ao clicar na linha que possua a class 'linha', ele pegue o valor que está dentro da mesma. 4º Modifiquei a linha do script que atribuía a variável 'setor' ao campo select, utilizando a propriedade .val() para atribuir o valor da variável 'setor' ao campo com o id 'setor'.

1
  • 2
    Isso mesmo! Deu certinho. Muito obrigado! Commented 14/07/2017 às 14:07
0

O problema é que ele está deixando selecionado options antigos, você pode reiniciar as marcações antes de selecionar novamente:

$('option').removeAttr('selected');

var setores = [{
    "id": "1",
    "setor": "Recepcao"
  },
  {
    "id": "2",
    "setor": "Pronto Socorro"
  },
  {
    "id": "3",
    "setor": "Unidade de Internacao"
  }
];

preencherComboBox();
preencherTabela();


function preencherComboBox() {
  var combo = $('.select');
  $.each(setores, function(i, setor) {
    combo.append($('<option>', {
      value: setor.id,
      text: setor.setor
    }));
  });
}

function preencherTabela() {
  var tbody = $('.tbody');
  $.each(setores, function(i, setor) {
    var linha = "<tr>" +
      "<td>" + setor.id + "</td>" +
      "<td>" + setor.setor + "</td>" +
      "</tr>";
    tbody.append(linha);
  });
}


$('.tbody tr').on('click', function(e) {
  var tableData = $(this).children("td").map(function() {
    return $(this).text();
  }).get();

  var setor = $.trim(tableData[0]);
  $('option').removeAttr('selected');
  $('.select option[value=' + setor + ']').attr('selected', 'selected');

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<div class="form-group ">
  <label>Itens</label>
  <select class="form-control select col-lg-2"></select>
</div>

<table class="table table-responsive table-hover">
  <thead>
    <th>ID</th>
    <th>Setor</th>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

1
  • Na minha aplicação não funcionou desse jeito Commented 14/07/2017 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .