Jquery多个选择框问题

时间:2010-07-02 08:16:43

标签: jquery

我看中了Jquery Multiple复选框/选择框列表脚本。

查看HERE进行演示。

这是域可用性查找表单。

问题是我在搜索

中获得了<input type="text" name="domain" size="20"/>的价值

未选中复选框的结果。

对于未经检查的复选框,应该没有结果。

这是脚本:

(function(jQuery) {

    jQuery.fn.custSelectBox = function(options){

        //css names
        var classselectbox = "selectbox";
        var selectbox = "." + classselectbox;
        var selectboxoptions_wrap = ".selectboxoptions_wrap";
        var hideitem = "hideitem";
        var classselected = "selected";
        var classselectboxopen = "selectboxopen";
        var classselectboxfoot ="selectboxfoot";
        var selectboxfoot = "." +classselectboxfoot;
        var elmValue = ".elmValue";

        var defaults = {
                isscrolling:    true,               //scrolls long lists
                scrollminitems: 15,                 //items before scrolling
                scrollheight:   150,                //height of scrolling window
                preopenselect:  true,               //opens prechecked select boxes
                hoverstyle:     "hover",            //css hover style name
                openspeed:      "normal",           //selectbox open speed "slow","normal","fast" or numbers 1000
                alldisabled:    false,              //disables the selectbox
                selectwidth:    "auto",             //set width of selectbox
                wrappername:    ".select_wrap"
            };
        //override defaults
        var opts = jQuery.extend(defaults, options);

        return this.each(function() { 

        /** FUNCTIONS **/
        jQuery.fn.disable = function(thisElm){
            //loop through items
            for(var i=0;i<jQuery(thisElm).find("ul").find("li").length;i++)
            {
                if(jQuery(jQuery(thisElm).find("ul").find("li").get(i)).hasClass(classselected))
                {
                    jQuery(jQuery(thisElm).find("ul").find("li").get(i)).addClass("selected_disable");
                }
                jQuery(jQuery(thisElm).find("ul").find("li").get(i)).unbind();
                jQuery(jQuery(thisElm).find("ul").get(i)).find("input").attr("enabled","enabled");
            }               
        };

        //adds form elements to the selectbox
        jQuery.fn.addformelms = function(thisElm){
                var currElm = jQuery(thisElm);
                var boxtype = jQuery(thisElm).find(selectboxoptions_wrap+ " ul").attr("class");

                if(boxtype.indexOf("selectboxoptions_radio") >-1)
                {
                    var radioVal = jQuery(currElm).find("."+classselected+" span").text();
                    jQuery(currElm).find(selectboxoptions_wrap).append("<input type=\"text\" id=\""+jQuery(main_currElm).attr("id")+"\" name=\""+jQuery(main_currElm).attr("name")+"\" value=\""+radioVal+"\">");
                }
                else
                {
                    for(var i=0;i<jQuery(currElm).find(selectboxoptions_wrap + " li").length;i++)
                    {
                        var currInnerElm = jQuery(currElm).find(selectboxoptions_wrap + " li").get(i);
                        jQuery(currInnerElm).append("<input type=\"hidden\" id=\""+jQuery(main_currElm).attr("id") +"_"+ i+"\" name=\""+jQuery(main_currElm).attr("name") +"_"+ i+"\" value=\"\">");

                        if(jQuery(currInnerElm).hasClass(classselected))
                        {
                            var checkVal = jQuery(currInnerElm).find("span").text();
                            jQuery(jQuery(currElm).find(selectboxoptions_wrap + " li").get(i)).find("input").val(checkVal);
                        }
                    }
                }
        };

        //opens selectboxs if they have pre selected options
        jQuery.fn.openSelectBoxsThatArePrePopulated = function(currElm)
        {
                var boxtype = jQuery(currElm).find(selectboxoptions_wrap+ " ul").attr("class");

                if(jQuery(selectbox).parent().find("." +boxtype).find("li").hasClass(classselected))
                {
                    jQuery(selectbox).addClass(classselectboxopen);
                    jQuery(selectbox).parent().find(selectboxoptions_wrap).slideDown("normal");
                    jQuery(selectbox).parent().find("." +boxtype).find("li").addClass(hideitem);
                }
        };

        jQuery.fn.scrolling = function (theElm, isOpen)
        {
            if(isOpen)
            {
                if(jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul li").length >= opts.scrollminitems){
                    jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul").css("height",opts.scrollheight).addClass("setScroll");
                }
            }
            else{
                jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul").css("height","auto").removeClass("setScroll");
            }
        };
        /** FUNCTIONS **/

        //BUILD HTML TO CREATE CUSTOM SELECT BOX
        var main_currElm = jQuery(this);
        var wrapperElm = jQuery(main_currElm).parent();
        var name = "";
        var select_options = jQuery(main_currElm).find("option");
        var opts_str="";
        var isDisabled = jQuery(main_currElm).attr("disabled");
        var isMulti = jQuery(main_currElm).attr("multiple");
        var boxtype = "selectboxoptions_radio";
        var disabled = "";

        if(isMulti){boxtype = "selectboxoptions_check";}
        if(isDisabled){disabled="disabled";}
        //loop through options
        for(var i=0;i<select_options.length;i++)
        {
            var checked="";
            var currOption = jQuery(select_options).get(i);

                               if(i===0){
                name =jQuery(currOption).text();
            }
            else
            {               
                               if(jQuery(currOption).attr("selected")){checked ="selected";}

                opts_str = opts_str + "<li class=\""+checked +" "+disabled+"\"><span class=\"elmValue\">"+jQuery(currOption).val()+"</span>"+jQuery(currOption).text()+"</li>";
            }
        }

        jQuery(wrapperElm).empty().html("<div class=\"selectbox\"><ul><li>"+name+"</li></ul></div><div class=\"selectboxoptions_wrap\"><ul class=\""+boxtype+"\">"+opts_str+"</ul></div>");
        jQuery(wrapperElm).find(selectboxoptions_wrap +" ul").after("<div class=\""+classselectboxfoot+"\"><div></div></div>"); //add footer

        if("auto" != opts.selectwidth){
            jQuery(wrapperElm).find(selectbox + " ul").css({width:opts.selectwidth});
            jQuery(wrapperElm).find(selectboxoptions_wrap + " ul").attr("class",boxtype).css({width:(opts.selectwidth+57) + "px"});
            jQuery(wrapperElm).find(selectboxfoot + " div").css({width:opts.selectwidth + "px"});
        }else{
            jQuery(wrapperElm).find(selectboxoptions_wrap + " ul").attr("class",boxtype).css({width:(jQuery(wrapperElm).find(selectbox + " ul").width()+57) + "px"});
            jQuery(wrapperElm).find(selectboxfoot + " div").css({width:jQuery(wrapperElm).find(selectbox + " ul").width() + "px"});
        }

        if(isDisabled){jQuery.fn.disable(jQuery(wrapperElm).find(selectboxoptions_wrap));}

        var thisElement = jQuery(opts.wrappername);

        //bind item clicks
        jQuery(selectboxoptions_wrap+ " ul li").unbind().click( function() {

            if(jQuery(this).attr("class").indexOf("disabled") < 0)
            {
                var id;
                var boxtype = jQuery(this).parent().attr("class");

                if(boxtype.indexOf("selectboxoptions_radio") >-1)
                {
                    if(!jQuery(this).hasClass(classselected))
                    {
                        id = jQuery(this).find(elmValue).text();
                        jQuery(this).parent().find("." + classselected).removeClass(classselected);
                        jQuery(this).addClass(classselected);
                        jQuery(this).parent().parent().find("input").val(jQuery(this).find(elmValue).text());
                    }
                    else
                    {
                        jQuery(this).parent().find("." + classselected).removeClass(classselected);
                        jQuery(this).parent().parent().find("input").val("");
                    }
                }
                else //checkbox
                {
                    if(jQuery(this).hasClass(classselected))
                    {
                        //turn off the checkbox
                        jQuery(this).removeClass(classselected);
                        //blank out the value                       
                                                jQuery(this).find("input").val("");
                                                id = jQuery(this).find(elmValue).text();  
                    }
                    else
                    {
                        //gets the value of the element
                        id = jQuery(this).find(elmValue).text();    
                        jQuery(this).addClass(classselected);
                        jQuery(this).find("input").val(id);
                    }
                }
            }
        }).hover(function(){
            jQuery(this).addClass(opts.hoverstyle);
        },function(){
            jQuery(this).removeClass(opts.hoverstyle);
        });

        //bind sliding open
        jQuery(thisElement).find(selectbox).unbind().toggle(
            function() {
                if(opts.isscrolling){jQuery.fn.scrolling(jQuery(this),true);}
                //unhide li
                jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").removeClass(hideitem);
                //makes the arrow go up or down
                jQuery(this).removeClass(classselectbox).addClass(classselectboxopen);
                //slides the options down
                jQuery(this).parent().find(selectboxoptions_wrap).slideDown(opts.openspeed);
            },
            function() {
                var boxtype = jQuery(this).parent().find(selectboxoptions_wrap+ " ul").attr("class");
                if(jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").hasClass(classselected))
                {
                    jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").addClass(hideitem);
                }   
                else
                {
                    //makes the arrows go up or down
                    jQuery(this).removeClass(classselectboxopen).addClass(classselectbox);
                    //slides the options up
                    jQuery(this).parent().find(selectboxoptions_wrap).slideUp("normal");
                }

                if(opts.isscrolling){jQuery.fn.scrolling(jQuery(this),false);}
            });


            jQuery.fn.addformelms(jQuery(wrapperElm));
            if(opts.preopenselect){ jQuery.fn.openSelectBoxsThatArePrePopulated(jQuery(wrapperElm));}
            if(opts.alldisabled){jQuery.fn.disable(jQuery(thisElement));}
        });

    };

})(jQuery);

有什么不对?为什么它为未经检查的域传递输入框值?

感谢名单。

1 个答案:

答案 0 :(得分:1)

我刚测试了这个(Firefox 3.6.6)。

作为测试,我输入“google”作为域名,并在特殊选择框中选中“.net”和“.us”。

Firebug显示我提交表单时执行的POST操作具有以下变量:

domain  google
tlds[]_0    
tlds[]_1    .net
tlds[]_2    .us

然后我提交了表单,其中包含“google”域名,未选择任何扩展名。然后FireBug显示以下参数被发布:

domain  google
tlds[]_0    
tlds[]_1    
tlds[]_2    

在每种情况下,在浏览器中看到的响应确实显示“问题是我在搜索结果中获取INPUTBOX的值未选中复选框。对于未检查的复选框,它应该没有结果。

如果您正在生成该消息,那么只需要一个包含以下内容的简单PHP页面可能会有所帮助:

<h2>POST Variables</h2>
<pre><?php var_dump( $_POST ); ?></pre>
<h2>GET Variables</h2>
<pre><?php var_dump( $_GET ); ?></pre>

可能是您的表单处理程序没有以正确的方式查找参数 - 这应该准确显示表单处理程序的内容。