How can i use dropdown in table tag

Question

I have an Inline editable Table which updates the Mysql table for the team group column I want to use the drop-down list.

But the table is saving all the value of Dropdown instead of the one i have selected

Below is the code I'm working with and few screenshot for your reference

  <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>

As suggested i'm adding the script-

<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>