Select combobox from a click on the table row

Question

I have a combobox and a table:

I would like every time when clicking on the table, select the item in the combobox according to the click.

Follow example of the problem.

Try to click several times in the table. At the beginning it even works, then it stops working.

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>

Answer 1

I made some modifications to the code, I believe it works like this:

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>

I basically did the following: 1st I defined the class 'line' for tags tr (table rows); 2nd I defined a id to the select; 3º I configured the script so that when clicking on the line that has the class 'line', it takes the value that is within it. 4º I modified the line of the script that assigned the variable 'sector' to the select field, using the property .val() to assign the value of the 'sector' variable to the field with the id 'sector'.

Answer 2

The problem is that it is leaving selected options old, you can reset the tags before selecting again:

$('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>