下拉框联动查询

最新推荐文章于 2024-02-25 21:06:31 发布

Yang-Bo

最新推荐文章于 2024-02-25 21:06:31 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_42800961/article/details/102485556

本文介绍如何在页面加载时通过JavaScript实现下拉框的联动查询功能。加载时调用loadSelect()方法，该方法处理下拉菜单的交互逻辑，确保选择项之间的关联查询正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面加载是加载loadSelect()方法
js代码:

loadSelect: function() {
		$.ajax({
			method: "post",
			url: 'http://localhost:8888/region/findByTwoRegion',
			dataType: "json",
			async: true,
			success: function(res) {
				var result = res.result;
				var str = '<option value="">--请选择--</option>';
				for (var i = 0; i < result.length; i++) {
					str += '<option value=' + result[i].aid + '>' + result[i].aname + '</option>';
				}
				$("#areaPid").html(str);
			}
		});
		
		$("#areaPid").change(function() {
			var pid = $("#areaPid").val();
			$.ajax({
				method: "post",
				dataType: "json",
				url: 'http://localhost:8888/region/findByPid',
				data: {
					pid: pid
				},
				success: function(result1) {
					var res = result1.result ;
					var str = '';
					for (var i = 0; i < res.length; i++) {
						str += '<option value=' + res[i].aname + '>' + res[i].aname + '</option>';
					}
					$("#areaTwoPid").html(str);
					//$('#areaTwoPid').selectpicker('refresh');
				}
			});
		});
	},

html代码:

						<div class="form-group">
								<label class="control-label" style="width: 60px; padding-left: 0;">分厂：</label>
								<select class="form-control" id="areaPid">
									<option value="">-请选择-</option>
								</select>
							</div>
							<div class="form-group">
								<label class="control-label" style="width: 60px; padding-left: 0;">区域：</label>
								<select class="form-control" id="areaTwoPid">
									<option value="">--请选择--</option>
								</select>
							</div>