select框多级联动（以省市区三级联动为例）公共方法

最新推荐文章于 2024-09-15 17:41:01 发布

Mr_daiven

最新推荐文章于 2024-09-15 17:41:01 发布

阅读量1.6w

点赞数 6

分类专栏： JavaScript 文章标签：前端下拉框 select 三级联动多级联动

本文链接：https://blog.csdn.net/DWL0208/article/details/82716112

版权

本文介绍了一个简单的前端实现省市区三级联动select框的方法，通过公共函数结合jQuery，减少代码重复。每个级别的select根据上一级选择的值动态加载数据。详细介绍了如何设置select的id和数据接口，以及数据结构和部分后端代码。提供了一个适用于多级联动的灵活解决方案。

摘要由CSDN通过智能技术生成

前面写了两篇关于select框的文章，想到select框多级联动的情况。多级联动的select框从数据库中获取选项，也是很好实现的，我看到其他文章都写得过于复杂，所以这里写了一个公共方法，配合jQuery一起使用，供大家参考。

$.fn.linkselect = function(options) {
	var select = this;//获取当前select对象
	var url = options.url;//获取数据的链接
	var value = options.value;//初始化需要选中的数据
	var now = options.now;//当前select的级别
	var param = options.param;//传向后台的参数
	var level = options.level;//一共有多少级select
	var preid = options.preid;//当前select的id的前缀
	$.get(url[now],{param:param},function(result){
		select.find("option").remove();
		select.append("<option value=''>请选择</option>");
		for(key in result){
			if(key == value[now]){
				select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
			}else{
				select.append("<option value='"+ke