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

JQuery+JSON 生成联动多选和复选

话不多说,请看代码

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){ 
		getSelectVal(); 
		getSelectVal2(); 
		$("#product_big_cat_id").change(function(){ 
			getSelectVal(); 
			getSelectVal2();
		}); 
	}); 
    function getSelectVal(){
        $.getJSON("server.php",{bigid:$("#product_big_cat_id").val()},function(json){ 
			var son_cat = $("#son_cat"); 
			$("option",son_cat).remove(); //清空原有的选项 
			$.each(json,function(index,array){ 
				var option = "<option value='"+array['id']+"'  "+array['selected']+">"+array['title']+"</option>"; 
				son_cat.append(option); 
			}); 
		}); 
	}
	function getSelectVal2(){
        $.getJSON("server.php",{bigid:$("#product_big_cat_id").val()},function(json){ 
			var son_cat = $("#son_cat2");
			var str="";
			son_cat.attr("innerHTML",''); 
			var n=0;
			$.each(json,function(index,array){ 
				n=n+1;
				var option = "<input type='checkbox' name='son_cat2[]' value='"+array['id']+"'  "+array['selected']+"/>"+array['title']+"&nbsp;&nbsp;&nbsp;&nbsp;";
				str=str+option;	
				if (n%4==0){
					str=str+"<br>";
				}		
			});
			son_cat.attr("innerHTML",str);
		}); 
	}
</script>
?