Question

I wan to select the tiles but able to edit the other and type what I want

I know I’m missing lots sorry…

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

Title

Mr

Mrs

Miss

Ms

Other

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 === 'keypress') {
                    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();                   
                }
                else {
                    objChange.text($(this).text());
                }
            });

        });