即时点选的菜单

昨天应某同事的要求，给他设计的后台增加了个小功能，

通过点击下拉菜单给相应的表单赋值，如果是已经选取的选项，则点击后在表单区域删掉相应项目。

点此查看DEMO：

 其中主要要注意的有两点：

第一，被点选赋值的输入框具有了readonly属性，这样就只能通过js赋值了，防止出现不必要的输入结果
 <input type="text" name="" value="" id="tofill" readonly="readonly" /> 

第二，选中的值再点选是取消的功能，在输入框中采用replace方法替换掉相应字符串即可：

tfl.val( tfl.val().replace(txt,""));

 完整的JS代码如下：

 $(function(){

     var  tfl = $( " #tofill " );
     var  sids = []; // 保存id们的数组
     var  timr = false ;
    
    tfl.one( " focus " , function (){
        $( this ).val( "   " );                      
    })
    .focus( function (){
         var  x = $( this ).offset().left;
         var  y = $( this ).offset().top;
        $( " #ftip " ).css({  " left " :x,  " top " :y + 24 + " px " }).show();
        })
    
    
    
    $( " #ftip li " ).bind( " mouseover " , function (){
         var  _li = $( this );
         if (_li.children( " ul " ).length){
            _li.children( " ul " ).show();
            }
         if ( ! window.XMLHttpRequest)    _li.find( " label " ).addClass( " hov " );
        
        })
    .bind( " mouseleave " , function (){
         var  _li = $( this );                        
        _li.children( " ul " ).hide();    
         if ( ! window.XMLHttpRequest)    _li.find( " label " ).removeClass( " hov " );
        
        })
    .find( " label " )
        .click( function (e){
         var  tar = $(e.target);
         if ( ! window.XMLHttpRequest)    tar.find( " input " ).click();        
        tar.toggleClass( " seled " );
         var  txt = "   " +  tar.text();
         if (tar.hasClass( " seled " )){
            tfl.val( tfl.val()  + txt  );
            } else {
                tfl.val( tfl.val().replace(txt, "" ));
                }
        })
        
     // 鼠标移到其他元素 弹出菜单隐藏 赋值    
    $( " input, table, td ,input, span " ).mouseover( function (){
         var  tip = $( " #ftip " );
        sids.length = 0 ;                           
        tip.find( " label " ).each( function (){
             if ($( this ).hasClass( " seled " )){
                sids.push( $( this ).attr( " id " ) );
                }                                
            })
        tip.hide();    
         // alert(sids);
        })
    
// end $(fn);
})