jquery - jqueryドロップダウンリスト「その他」が編集可能な挨拶

Question

他のオプションを編集可能にするドロップダウンメニュー「彩度」を作成しようとしています。ユーザーはドロップダウンのすべてのオプションを選択できますが、一致しない場合は、必要なものを「その他」タイプから選択できます。デモに何かを入れましたが、かなり行き詰まっています。

http://jsfiddle.net/Rjqy5/57/

title -> this will change once selected the other
Mr
Mrs
Miss
Ms
Other -> this will be editable. 

Answer 1

   $(document).ready(function () {
            $('.dropdown').live('mouseenter', function () {
                $('.sublinks').stop(false, true).hide();

                var submenu = $(this).parent().next();

                submenu.css({
                    position: 'absolute',
                    top: $(this).offset().top + $(this).height() + 'px',
                    left: $(this).offset().left + 'px',
                    zIndex: 1000
                });

                submenu.stop().slideDown(300);

                submenu.mouseleave(function () {
                    $(this).slideUp(300);

                    $('a#other').focus(function () {
                        $('#change').blur();
                    });
                });
            });

            $('#tbOthers').live('keypress focusout', function (e) {
                var textTitle = $.trim($(this).val());
                if (e.type === 'keypress') {
                    if ((e.keyCode ? e.keyCode : e.which) === 13) {
                        if (textTitle.length === 0) {
                            $(this).replaceWith('<a href="#" class="dropdown" id="change">Title</a>');
                        }
                        else {
                            $(this).replaceWith('<a href="#" class="dropdown" id="change">' + textTitle + '</a>');
                        }
                    }
                } else if (e.type === 'focusout') {
                    if (textTitle.length === 0) {
                        $(this).replaceWith('<a href="#" class="dropdown" id="change">Title</a>');
                    }
                    else {
                        $(this).replaceWith('<a href="#" class="dropdown" id="change">' + textTitle + '</a>');
                    }
                }
            });

            $('#mainLink').find('.sublinks a').live('click', function (e) {
                var objChange = $('#mainLink').find('#change');
                if ($(this).attr('id') === 'other') {
                    objChange.parent().append($('<input />', { 'id': 'tbOthers', 'type': 'text' }));
                    objChange.remove();
                    alert('dd');
                }
                else {
                    objChange.text($(this).text());
                }
            });

        });