I have a `tr` and if you click on it it will change to `select` and enable the user to select an option. How can I make it go back to `td` with the new value after the user clicks away from the input?

```js
$(function() {
  $(".departamento").one('click', function(e) {
    e.stopPropagation();
    var currentEle = $(this);
    var value = $(this).html();
    select = '<select class="form-control" id="departamento" name="departamento">' +
      '<option name="Comercial" <?php echo ($departamento == "Comercial")?"selected":""; ?> >Comercial</option>' +
      '<option value="Suporte Tecnico" <?php echo ($departamento == "Suporte Tecnico")?"selected":""; ?> >Suporte Técnico</option>' +
      '<option value="Direcao" <?php echo ($departamento == "Direcao")?"selected":""; ?> >Direção</option>' +
      '<option value="Formacao "<?php echo ($departamento == "Formacao")?"selected":""; ?> >Formação</option>' +
      '</select>';
    currentEle.html(select);
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Departamento</th>
    <td class="departamento">
      <?php echo $departamento;?>
    </td>
  </tr>
</table>
```

Thanks!