Question

I’m trying to create a dropdown menu “satutation” with the other option to be editable.
the user could choose all the options on the dropdown but if it doesn’t match he can choose “Other” type what he wants.
I put something in my demo but I’m quite stuck.

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());
                }
            });

        });