Как я могу использовать выпадающий в таблице <td>тег

Question

У меня есть встроенная редактируемая таблица, в которой обновляется таблица Mysql для столбца группы команд. Я хочу использовать раскрывающийся список.

Но таблица сохраняет все значение Dropdown вместо того, которое я

Ниже приведен код, с которым я работаю, и несколько скриншотов для справки

  <td class="editable-col" contenteditable="True" col-index='5' oldVal ="<?php echo $res['TeamGroup'];?>" nowrap>
               <?php echo $res['TeamGroup'];?>
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

            </td>

Как и предполагалось, я добавляю скрипт -

<script type="text/javascript">
$(document).ready(function(){
    $('td.editable-col').on('focusout', function() {
        data = {};
        data['val'] = $(this).text().trim();
        data['id'] = $(this).parent('tr').attr('data-row-id');
        data['index'] = $(this).attr('col-index');

      if($(this).attr('oldVal') === data['val'])
      {
        return false;
      }

        $.ajax({

                    type: "POST",
                    url: "server.php",
                    cache:false,
                    data: data,
                    dataType: "json",
                    success: function(response)
                    {
                        if(response.status) {
                            $("#msg").removeClass('alert-danger');
                            $("#msg").addClass('alert-success').html(response.msg);
                        } else {
                            $("#msg").removeClass('alert-success');
                            $("#msg").addClass('alert-danger').html(response.msg);
                        }
                    }
                });
    });
});

</script>