2010-07-02 95 views
0

我看中了Jquery多选框/选择列表脚本。Jquery多选择框问题

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

什么是错的?为什么它通过未经检查的域的输入框值?

Thanx。

回答

1

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

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

萤火虫表明POST操作,执行当我提交表单,有以下变量:

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

然后我提交表单,以“谷歌”一域,没有选择的扩展名。萤火虫则表现张贴下列参数:

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

这是出现在浏览器中,在每种情况下的反应,的确显示出“问题是我正在为未选中的复选框搜索结果输入框的值应该是的。是没有结果未选中的复选框

如果您正在生成的消息,它可能有助于只是包含一个简单的PHP页面:

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

这可能是因为你的表单处理程序为n没有以正确的方式寻找参数 - 这应该显示表单处理程序正在获得什么。

+0

我只是通过创建一个包含上述建议的PHP代码的文件,然后将表单处理程序更改为通过XAMPP本地托管的文件来完成此操作。我得到了上述输入(域“谷歌”和没有复选框)的结果是 - $ _POST ['domain'] ='google',$ _POST ['tlds'] [0] ='',$ _POST ['tlds '] [1] ='',$ _POST ['tlds'] [2] =''。提交工作正常,请检查您的处理程序的代码。 – 2010-07-02 09:27:33

+0

谢谢。你在说什么是正确的... – MANnDAaR 2010-07-02 11:17:50

+0

欢迎。只要确保您对处理程序所做的任何更改仍然能够接受来自未使用jQuery插件增强的表单的提交内容。必须记住允许优雅退化,例如,应该让访问者关闭javascript。 – 2010-07-02 12:04:50