即时点选的菜单

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

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

点此查看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);
})