Select combobox from a click on the table row

Question

Select combobox from a click on the table row

Navigation

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

0

I have a combobox and a table:

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

Following is an example of the problem.

Try to click multiple times in the table. At first it 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><divclass="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>

jquery css bootstrap-3 table

asked by anonymous 14.07.2017 / 15:33

2 answers

0

The problem is that it is leaving selected options old, you can restart the markings 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><divclass="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>

14.07.2017 / 16:10

Problems with 'onsubmit' in form and function 'setTimeout' Database does not work

score 2 · Accepted Answer

I made some modifications to the code, I believe it works the way you want it to:

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

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