Ajax城市级联-CFANZ编程社区

Ajax城市级联

页面部分

<body>
	<h1>ajax级联效果（二级联动）</h1>
	<select id="selYi">
		<option value="">请选择城区</option>
	</select>
	<select id="selEr">
		<option value="">请选择街道</option>
	</select>
</body>

页面加载显示城市去的下拉框

    //页面加载即可显示城区的下拉框数据
		$.ajax({
			url : "UserServlet",
			type : "post",
			data : {
				op : "loads"
			},
			dataType : "json",
			success : function(data) {
				$.each(data,function(i, n) {
						$("#selYi").append('<option value="'+n.id+'">' + n.name + '</option>');
						});
			}
		});

当城区被选中后调用change事件

//change事件
		$("#selYi").change(
			function() {
				//获取选中的区县id
				var did = $("#selYi").val();
				$.ajax({
					url : "UserServlet",
					type : "post",
					data : {
						op : "changes",
						did : did
					},
					dataType : "json",
					success : function(data) {
					    $("#selEr").html('<option value="">请选择街道</option>');
						$.each(data, function(i, n) {
						    $("#selEr").append('<option value="'+n.id+'">' + n.name+ '</option>');
						});
					}
				});
			});

0 条评论