jqueryドロップダウンリスト "他の"編集可能な場所での挨拶

Question

編集可能な他のオプションと一緒にドロップダウンメニュー "彩度"を作成しようとしています。 ユーザーはドロップダウン上のすべてのオプションを選択できますが、一致しない場合は、「その他」を選択して、彼が望むものを入力することができます。 私はデモに何かを入れましたが、私はかなり固執しています。 http://jsfiddle.net/nanoquantumtech/QSzhx/：ライブデモ用

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

     });