我看中了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);
有什么不对?为什么它为未经检查的域传递输入框值?
感谢名单。
答案 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>
可能是您的表单处理程序没有以正确的方式查找参数 - 这应该准确显示表单处理程序的内容。