2010-07-02 81 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