JQuery二级联动（ each(callback)，$.each(object, [callback])）

1.each(callback)

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成省市二级联动</title>
	

		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script>
			$(function() {
				var cities = new Array(3);
				cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
				cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
				cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
				cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");
				$("#province").change(function() {
					$("#city").empty();
					var val = this.value;
					$(cities).each(function(i) {
						//alert(i+":"+n);
						if (val == i) {
							$(cities[i]).each(function(j) {
								var textNode = document.createTextNode(cities[i][j]);
								var opEle = document.createElement("option");
								$(opEle).append(textNode);
								$(opEle).appendTo($("#city"));
							});
						}
					});
				});
			});
		</script>

	</head>

	<body>
		<select id="province">
			<option>--请选择--</option>
			<option value="0">湖北</option>
			<option value="1">湖南</option>
			<option value="2">河北</option>
			<option value="3">河南</option>
		</select>
		<select id="city">
									
		</select>

	</body>

</html>

2. $.each(object, [callback])

<script>
	$(function(){
		var cities = new Array(3);
		cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
		cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
		cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
		cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
		
		$("#province").change(function(){
			
			$("#city").empty();
			
			
			var val = this.value;
		
			
			$.each(cities,function(i,n){
			
				if(val==i){
					
					$.each(cities[i], function(j,m) {
						
						var textNode = document.createTextNode(m);
						
						var opEle = document.createElement("option");
						
						$(opEle).append(textNode);
						
						$(opEle).appendTo($("#city"));
					});
				}
			});
			
		});
	});
</script>

JQuery二级联动 （ each(callback)，$.each(object, [callback])）

猜你喜欢

JQuery二级联动（ each(callback)，$.each(object, [callback])）