多级下拉列表默认触发下拉事件加载数据

最新推荐文章于 2023-07-28 15:50:21 发布

原创最新推荐文章于 2023-07-28 15:50:21 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #级联下拉

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的省市区三级联动选择框的示例代码。该示例展示了如何通过AJAX请求获取数据，并利用jQuery动态更新下拉菜单选项。特别关注了`val()`、`change()`及`trigger('change')`等关键函数的使用。

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

jQuery.get("./getProvinceList",{},function(data){
        	console.log();
        	var list = data.data.list;
        	var html = "<option value='0' disabled='disabled'>省</option>";
        	for(var i=0;i<list.length;i++){
        		html += "<option value='"+list[i].id+"'>"+list[i].text+"</option>";
        	}
        	$("#province").html(html);
        	//写入默认值,
        	if(load){
	        	$("#province").val(${entity.province});
	        	//触发下拉事件
	        	$('#province').trigger('change');
        	}
        },"json");
        //省改变加载市
        $("#province").change(function(){
        	//省改变其它默认初始化
        	$("#lawyerStation").html("<option value='-1' disabled='disabled' selected='selected'>请选择律师事务所</option>");
        	$("#county").html("<option value='0' disabled='disabled' selected='selected'>区县</option>");
        	$("#otherCounty").attr("hidden",true);
        	$("#otherLawyerStation").attr("hidden",true);
        	
        	
        	ProvinceId = this.value;
        	jQuery.get("./cityListByProvinceId",{ProvinceId:ProvinceId},function(data){
            	var list = data.data.list;
            	var html = "<option value='0' disabled='disabled' selected='selected'>地级市</option>";
            	for(var i=0;i<list.length;i++){
            		html += "<option value='"+list[i].id+"'>"+list[i].text+"</option>";
            	}
            	$("#city").html(html);
            	//写入默认值,
            	if(load){
	            	$("#city").val(${entity.city});
	            	//触发下拉事件
	            	$('#city').trigger('change');
            	}
            },"json");
        })

关键是val(),change(),trigger('change')三个函数的使用