Не корретная работа выбора элемента в динамическом <select>
 

Коллеги, добрый день!

Прошу помощи в решении вопроса корретной работы при выборе элемента в динамическом <select>.
Пишу, на Java, поэтому многих вопросов по JavaScript просто не понимаю.
У меня на jsp странице есть таблица 'plan-table', часть столбцов таблицы нередактируемая...
По клику на редактируемой ячейке, в этой ячейке должен появляться выпадающий список сокращённых названий(абревиатур).
текст в ячейке таблицы принимает значение выбранного элемента из списка. Это как хотелось бы, что бы так работало...

На деле, выпадающий список по клику появляется, но выбрать элемент мышкой и присвоить это значение ячейке не получается.
Правда, можно кликнуть по ячейке до появления кнопки выпадения списка и стрелками вверх вниз осуществить выбор элемента из списка и присвоение его ячейке.
Вот код который так работает. Подскажите, что нужно подправить для корректной работы выбора элемента.

<script language="javascript">
    $(function () {
        $('table#plan-table td').click(function (e) {
            var t = e.target || e.srcElement;
            var elm_name = t.tagName.toLowerCase();

            if (elm_name == 'input') {return false;}

            if (this.className == 'info') {return false;}

            var code = '<select name="object" id="edit"><c:forEach items="${listAbreviatures}" var="listAbreviature"><option>${listAbreviature}</option></c:forEach></select>';

            $(this).empty().append(code);
            $('#edit').focus();

            $('#edit').blur(function () {
                var val = $("#edit :selected").val();
                $(this).parent().empty().html(val);

            });
        });
        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                $('#edit').blur();
            }
        });
    });
</script>

CTABP,
Если убрать очистку, то видно, что происходит - по каждому клику создается новый селект

<table id='plan-table'>
   <tr>
       <td><input></td>
       <td><div style='border:1px solid grey'>Здесь надо менять</div></td>
       <td><input></td>
   </tr>
</table>
<script src = "https://code.jquery.com/jquery-1.8.3.js"></script>
<script language="javascript">
    $(function () {
        $('table#plan-table td').click(function (e) {
            var t = e.target || e.srcElement;
            var elm_name = t.tagName.toLowerCase();

            if (elm_name == 'input') {return false;}

            if (this.className == 'info') {return false;}

            var code = '<select name="object" id="edit"><option value="первый">первый</option><option value="второй">второй</option><option value="третий">третий</option></select>';

            $(this).append(code);
            $('#edit').focus();

            $('#edit').blur(function () {
                var val = $("#edit :selected").val();
                $(this).parent().empty().html(val);

            });
        });
        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                $('#edit').blur();
            }
        });
    });
</script>

CTABP,

$('#edit').focus()*!*.click(function(e) {e.stopPropagation()});*/!*

Dilettante_Pro и рони, большое вам спасибо очень помогли