日期:2014-05-16  浏览次数:20979 次

利用AJAX显示根据分类显示子分类下拉列表,特殊情况显示多选框

此文章为利用AJAX选择一个下拉列表的一个选项则,在下个一子下拉列表显示数据,或者是可以选择多个子类即显示多选框

1、freemaker jsp内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>畅销品抓取-商品列表</title>
<#include  "/WEB-INF/templates/common/include/css.ftl">
<#include  "/WEB-INF/templates/common/include/js.ftl">
</head>

<script type="text/javascript" src="js/category/category.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript">
	function initPage()
	{
		var secondSelect = document.getElementById("second");
		var thirdSelect = document.getElementById("third");
		
		if(secondSelect.length == 0)
		{
			secondSelect.style.display="none";
		}
		else
		{
			secondSelect.style.display="block";
		}
		
		if(thirdSelect.length == 0)
		{
			thirdSelect.style.display="none";
		}
		else
		{
			thirdSelect.style.display="block";
		}
	}
	
    var xmlHttpRequest;
	function getFirstLevelCat()
    {
        var siteId=document.getElementById("siteId").value;
        var url="${base}/firstLevelCateAjax.action?siteId="+siteId;
        //alert(url);
        xmlHttpRequest=createXmlHttpRequest();    
        xmlHttpRequest.onreadystatechange=handleCategory;
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.send(null);
    }
    
    function handleCategory()
    {
       if(xmlHttpRequest.readyState == 4) 
        {        
            if(xmlHttpRequest.status == 200) 
            {
               //alert(xmlHttpRequest.responseText);
				var array = eval(xmlHttpRequest.responseText);
       			addOption(array[0],'first','\u8bf7\u9009\u62e9');
       			//addOption(array[1],'third','\u5168\u90E8');
       
        		// 控制标签隐藏,显示
			    initPage();
            }    
        }
    }
    
    function getNextLevelCat(categoryLevel,selectId)
    {
        var url="${base}/nextLevelCateAjax.action?parentCategoryId="+categoryLevel;
        //alert(url);
        xmlHttpRequest=createXmlHttpRequest();    
        xmlHttpRequest.onreadystatechange=function(){displayCategory(selectId)};
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.send(null);
    }
    
    function displayCategory(selectId)
    {
    	if(xmlHttpRequest.readyState == 4) 
        {        
            if(xmlHttpRequest.status == 200) 
            {
                //alert(xmlHttpRequest.responseText);
				var array = eval(xmlHttpRequest.responseText);
       			addOption(array[0],selectId,'\u8bf7\u9009\u62e9');
       			//addOption(array[1],'third','\u5168\u90E8');
       
        		// 控制标签隐藏,显示
			    initPage();
            }    
        }
    }
    
    function crawlProduct(type)
    {
    	var fetchSize = document.getElementById("fetchSize").value;
		var re = /^[\d]+$/ 
		if(re.test(fetchSize) == false)
		{
			alert("抓取数量必须为数字!");
			return;
		} 
		if(fetchSize<0)
		{
			alert("抓取数量不能为负数!");
			return;
		}
		
    	var categoryId;
    	var firstSelect = document.getElementById("first");
    	var secondSelect = document.getElementById("second");
		var thirdSelect = document.getElementById("third");
		if(thirdSelect != undefined && thirdSelect.value != '')
		{
			categoryId = thirdSelect.value;
		}
		else if(($("input[type=checkbox]")).length>0){
		    //alert("成功进入!")
		    var pcsgroups =$("input[type=checkbox]");
						var textV="";
						for(i=0;i<pcsgroups.length;i++){
							if($(pcsgroups[i]).attr("checked")){
								textV =textV + $(pcsgroups[i]).attr("value") + ",";
								textV =textV