2012-11-23 11:15:57  浏览:2838

jquery select 分类

jquery 无限极下拉框,而且提交数据时,只提交最后一级id

如果最后没选择,则提交上级id

这个代码适用于不定分类。

首先,页面加载的时候,循环出一个select

例如:

<select name="catid" onchange='changeCategory(this)' id="catgorys">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>

 

然后是js方法

//生成子分类 
function changeCategory(obj){
    	var pid = $(obj).val();
    	var title = $(obj).attr("title");
		var child_id=$(obj).attr("id")+"_child";
		var category_name="catid";
    	if(pid>0 && pid!=title){
			$.getJSON("/api/"+pid+".json", function(data){
				var h="<select id='"+child_id+"' class='inputbox' title='"+pid+"' name='"+category_name+"' onchange='changeCategory(this)'>";
				var data_length=0;
				h+="<option value='"+pid+"' >请选择</option>";
				$.each(data.data, function(i, n){
					h+="<option value='"+n.id+"'>"+n.cname+"</option>";
					data_length++;
				});
				h+="</select>";
				if($("#"+child_id).length>0){
					removeChild(obj);
				}
				if(data_length>0){
					$(obj).after(h);
					$(obj).attr("name","");
				}else{
					$(obj).attr("name",category_name);
				}
			});
    	}else{
    		$("#"+child_id).remove();
    		$(obj).attr("name",category_name);
    	}
    }
//删除子分类
    function removeChild(obj){
    	var child_id=$(obj).attr("id")+"_child";
		if($("#"+child_id).length>0){
	    	removeChild($("#"+child_id));
	    	$("#"+child_id).remove();
		}
    }

第三步,服务器json,以php为例:

查询结果

$data=array(

    "data"=array(array("id"=>123,"cname"=>"test123"),array("id"=>124,"cname"=>"test124"),array("id"=>125,"cname"=>"test125"))

);

输出json

header("Pragma: no-cache");
header("Cache-Control: no-store, no-cache, max-age=0, must-revalidate");
header('Content-Type: text/x-json');
header('Content-type: application/json');
echo json_encode($data);

 

---------------------------支持修改时,动态选中之前的选项-------------------------------------

javascript中:

首先定义全局变量,内容是所有父级编号,以及当前编号的值

例如:var catids=[123,125,129]; 

 php写法

var cat_ids=[];
<?php if(!empty($app["cat_ids_arr"])){?>
//分类编号
cat_ids=<?php echo json_encode($app["cat_ids_arr"])?>;
<?php }?>

 

function changeCategory(obj){
	var pid = $(obj).val();
	var title = $(obj).attr("title");
	var child_id=$(obj).attr("id")+"_child";
	var category_name="cat_id[]";
	if(pid>0 && pid!=title){
		$.getJSON("/category/"+pid+"/"+$("input[name='lan_id']").val()+".json", function(data){
			var h="<select id='"+child_id+"' class='inputbox' title='"+pid+"' name='"+category_name+"' onchange='changeCategory(this)'>";
			var data_length=0;
			var isSelect=0;
			h+="<option value='"+pid+"'>请选择</option>";
			$.each(data.data, function(i, n){
				if(jQuery.inArray(n.id,cat_ids)!=-1){
					isSelect=1;
					h+="<option value='"+n.id+"' selected>"+n.cname+"</option>";
				}else{
					h+="<option value='"+n.id+"'>"+n.cname+"</option>";
				}
				data_length++;
			});
			h+="</select>";
			if($("#"+child_id).length>0){
				//$("#"+child_id).remove();
				removeChild(obj);
			}
			if(data_length>0){
				$(".selection-main").append(h);
				//$(obj).attr("name","");
				//$("#"+child_id).selectBox();
			}else{
				$(obj).attr("name",category_name);
			}
			if(isSelect){
				changeCategory($("#"+child_id));
			}
		});
	}else{
		removeChild(obj);
		//$("#"+child_id).remove();
		$(obj).attr("name",category_name);
	}
}

这个就是判断,当前读取的数据中,是否被选中,如果有,则自动递归请求下一级菜单
iif(isSelect){
    changeCategory($("#"+child_id));
   }

 

返回首页