html选择框多级联动

最新推荐文章于 2024-05-09 01:23:07 发布
最新推荐文章于 2024-05-09 01:23:07 发布
阅读量1.4w 收藏 5
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liufang1991/article/details/52233595
版权

Demo来源：http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html

我把Demo改写成最多可以到5级联动，需要增加修改也很容易

数据来源，Java端通过Spring boot输出将实体类转成JSON对象，转换效率有点低

TreeItem.java

public class TreeItem {
    private String id;
    private String pId;
    private String name;
    private String extra;
    public TreeItem(String id,String pId,String name) {
        this.id = id;
        this.pId = pId;
        this.name = name;

    }
    public TreeItem(String id,String pId, String name, String extra) {
        this.id = id;
        this.pId = pId;
        this.name = name;
        this.extra = extra;
    }
    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getpId() {
        return pId;
    }

    public void setpId(String pId) {
        this.pId = pId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
Tree.java 

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Tree {
    private List<TreeItem> nodes;

    public Tree(List<TreeItem> nodes){
        this.nodes = nodes;
    }

    public Map buildTree(){
        List<Map<String,Object>> list=new ArrayList<>();
        for (TreeItem node : nodes) {
            String id = node.getId();
            if (node.getpId() == null) {
               list.add(build(node));
            }
        }
        Map treeMap=new HashMap<>();
        treeMap.put("citylist",list);
       return treeMap;
    }

    private Map build(TreeItem node){
        List<TreeItem> children = getChildren(node);
        List<Map<String,Object>> list=new ArrayList<>();
        Map<String,Object> map=new HashMap<>();
        map.put("node",node);
        if (children.isEmpty()) {
            return map;
        }
        for (TreeItem child : children) {
            list.add(build(child));
        }
        map.put("children",list);
        return map;
    }

    private List<TreeItem> getChildren(TreeItem node){
        List<TreeItem> children = new ArrayList<TreeItem>();
        String id = node.getId();
        for (TreeItem child : nodes) {
            if (id.equals(child.getpId())) {
                children.add(child);
            }
        }
        return children;
    }
}
通过调用Tree.buildTree函数就可以生成我们需要的json数据

然后就是前端页面了，预设值部分还没有做

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery+JSON的省市联动效果</title>
<script type="text/javascript" src="js/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cityselect2.js"></script>
<script type="text/javascript">
$(function(){
	$("#city").citySelect({
		nodata:null,
		required:false
	}); 
});
</script>
</head>

<body>
<div id="main">  
  <div class="demo">
  	<h3>设置省份、城市、地区（县）的默认值</h3>
    <p>三级联动</p>
    <div id="city">
  		<select class="s0"></select> 
    	<select class="s1" disabled="disabled"></select>
      <select class="s2" disabled="disabled"></select>
      <select class="s3" disabled="disabled"></select>
      <select class="s4" disabled="disabled"></select>
    </div>
  </div>
  </div>
  <br />
<br />
</div>
</body>
</html>

cityselect2.js 

/*
Ajax 多级联动
http://code.ciaoca.cn/
日期：2012-7-18

settings 参数说明
-----
url:省市数据josn文件路径
prov:默认省份
city:默认城市
dist:默认地区（县）
nodata:无数据状态
required:必选项
------------------------------ */
(function($){
	$.fn.citySelect=function(settings){
		if(this.length<1){return;};

		// 默认值
		settings=$.extend({
			url:"js/city.js",
			prov:null,
			city:null,
			dist:null,
			nodata:null,
			required:true
		},settings);

		var box_obj=this;
		var s0_obj=box_obj.find(".s0");
		var s1_obj=box_obj.find(".s1");
		var s2_obj=box_obj.find(".s2");
		var s3_obj=box_obj.find(".s3");
		var s4_obj=box_obj.find(".s4");
	
		var prov_val=settings.prov;
		
		var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
		var city_json;

		//获取当前选择框前面的选择框
		var getPreS=function(s){
			if(s==s1_obj) return s0_obj;
			if(s==s2_obj) return s1_obj;
			if(s==s3_obj) return s2_obj;
			if(s==s4_obj) return s3_obj;
			return null;
		}
		//获取当前选择框的下一个选择框
		var getNextS=function(s){
			if(s==s0_obj) return s1_obj;
			if(s==s1_obj) return s2_obj;
			if(s==s2_obj) return s3_obj;
			if(s==s3_obj) return s4_obj;
			return null;
		}
		//获取当前选择框的序号
		var getSelectN=function(s){
			if(s==s0_obj) return 0;
			if(s==s1_obj) return 1;
			if(s==s2_obj) return 2;
			if(s==s3_obj) return 3;
			return 4;
		}
		//根据当前选择框的值获取json数据的children
		var getCityChildren=function(s){
			var s0_id=s0_obj.get(0).selectedIndex;
			var s1_id=s1_obj.get(0).selectedIndex;
			var s2_id=s2_obj.get(0).selectedIndex;
			var s3_id=s3_obj.get(0).selectedIndex;
			var s4_id=s4_obj.get(0).selectedIndex;
			if(!settings.required){
				s0_id--;
				s1_id--;
				s2_id--;
				s3_id--;
				s4_id--;
			};
			if(s==s0_obj) return city_json.citylist[s0_id].children;
			if(s==s1_obj) return city_json.citylist[s0_id].children[s1_id].children;
			if(s==s2_obj) return city_json.citylist[s0_id].children[s1_id].children[s2_id].children;
			if(s==s3_obj) return city_json.citylist[s0_id].children[s1_id].children[s2_id].children[s3_id].children;
			return null;
		}
		//根据序号隐藏选择框
		var hidSubSelect=function(n){
			if(n<1){
				s1_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s1_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s1_obj.css("visibility","hidden");
				};
			}
			if(n<2){
				s2_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s2_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s2_obj.css("visibility","hidden");
				};
			}
			if(n<3){
				s3_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s3_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s3_obj.css("visibility","hidden");
				};
			}
			if(n<4){
				s4_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s4_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s4_obj.css("visibility","hidden");
				};
			}
		}

		// 赋值地区（县）函数
		var distStart=function(s){
			
			var current_id=s.selectedIndex;
			if(!settings.required){
				current_id--;
			};
			hidSubSelect(getSelectN(s));
			if(current_id<0||typeof(getCityChildren(s))=="undefined"||getCityChildren(s)==null){
				if(settings.nodata=="none"){
					getNextS(s).css("display","none");
				}else if(settings.nodata=="hidden"){
					getNextS(s).css("visibility","hidden");
				};
				return;
			};
			
			// 遍历
			temp_html=select_prehtml;
			$.each(getCityChildren(s),function(i,dist){
				temp_html+="<option value='"+dist.node.id+"'>"+dist.node.name+"</option>";
			});
			getNextS(s).html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
		};

		var init=function(){
			// 遍历赋值省份下拉列表
			temp_html=select_prehtml;
			$.each(city_json.citylist,function(i,prov){
				temp_html+="<option value='"+prov.node.id+"'>"+prov.node.name+"</option>";
			});
			s0_obj.html(temp_html);

			// 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置）
			setTimeout(function(){
				if(settings.prov!=null){
					prov_obj.val(settings.prov);
					cityStart();
					setTimeout(function(){
						if(settings.city!=null){
							city_obj.val(settings.city);
							distStart();
							setTimeout(function(){
								if(settings.dist!=null){
									dist_obj.val(settings.dist);
								};
							},1);
						};
					},1);
				};
			},1);

			// 选择省份时发生事件
			s0_obj.bind("change",function(){
				distStart(s0_obj);
			});
			s1_obj.bind("change",function(){
				distStart(s1_obj);
			});
			s2_obj.bind("change",function(){
				distStart(s2_obj);
			});
			s3_obj.bind("change",function(){
				distStart(s3_obj);
			});
			s4_obj.bind("change",function(){
				distStart(s4_obj);
			});
		};

		// 设置省市json数据
		if(typeof(settings.url)=="string"){
			$.getJSON(settings.url,function(json){
				city_json=json;
				init();
			});
		}else{
			city_json=settings.url;
			init();
		};
	};
})(jQuery);


把树的建立放到了前端js来建立

后端直接输出List<TreeItem>对象，框架自动输出JSON数组，前端js递归建树的代码如下

var districts;
        var arrayToTree=function(parentId) {
            var temp = [];
            for (var index in districts) {
                if (districts[index].pId == parentId) {
                    var children=arrayToTree(districts[index].id);
                    temp.push({
                        node: districts[index],
                        children: children
                    });
                }
            }
           return temp;
        };
        var buildTree= function (parentId) {
            var temp = {citylist:[]};
            for (var index in districts) {
                if (districts[index].id == parentId) {
                    temp.citylist.push({
                        node: districts[index],
                        children: arrayToTree(districts[index].id)
                    });
                }
            }
            return temp;
        };

在得到数据的时候修改一下

$.getJSON(settings.url, function (json) {
                    districts=json;
					city_json = buildTree('000');//000是根节点的ID
init();
}

jquery.cityselect.js最后的Javascript代码如下

/*
多级联动 刘放
日期：2016-8-22

settings 参数说明
-----
url:省市数据josn文件路径
s0:默认省份
s1:默认市
s2:默认县
s3:默认乡镇
s4:默认村
nodata:无数据状态  如果需要隐藏则填写none或者hidden
required:必选项

依赖于web-storage-cache.min.js
------------------------------ */
(function($){
	$.fn.citySelect=function(settings){
		if(this.length<1){return;};
		var wsCache = new WebStorageCache();
		// 默认值
		settings=$.extend({
			url:null,
			s1:null,
			s2:null,
			s3:null,
			s4:null,
			s0:null,
			nodata:null,
			required:true
		},settings);

		var box_obj=this;
		var s0_obj=box_obj.find(".s0");
		var s1_obj=box_obj.find(".s1");
		var s2_obj=box_obj.find(".s2");
		var s3_obj=box_obj.find(".s3");
		var s4_obj=box_obj.find(".s4");
        var text_obj=box_obj.find("input[type=hidden]");

        var setTextObj=function(){
            if(text_obj.length>0) {
                if(s4_obj.val()!=="") {
                    text_obj.val(
                    s0_obj.find("option:selected").text()+
                    s1_obj.find("option:selected").text()+
                    s2_obj.find("option:selected").text()+
                    s3_obj.find("option:selected").text()+
                    s4_obj.find("option:selected").text());
                }else{
                    text_obj.val("");
                }
            }
        };

        var prov_val=settings.prov;
		
		var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";
		var city_json;

		//获取当前选择框前面的选择框
		var getPreS=function(s){
			if(s==s1_obj) return s0_obj;
			if(s==s2_obj) return s1_obj;
			if(s==s3_obj) return s2_obj;
			if(s==s4_obj) return s3_obj;
			return null;
		}
		//获取当前选择框的下一个选择框
		var getNextS=function(s){
			if(s==s0_obj) return s1_obj;
			if(s==s1_obj) return s2_obj;
			if(s==s2_obj) return s3_obj;
			if(s==s3_obj) return s4_obj;
			return null;
		}
		//获取当前选择框的序号
		var getSelectN=function(s){
			if(s==s0_obj) return 0;
			if(s==s1_obj) return 1;
			if(s==s2_obj) return 2;
			if(s==s3_obj) return 3;
			return 4;
		}
		//根据当前选择框的值获取json数据的children
		var getCityChildren=function(s){
			var s0_id=s0_obj.get(0).selectedIndex;
			var s1_id=s1_obj.get(0).selectedIndex;
			var s2_id=s2_obj.get(0).selectedIndex;
			var s3_id=s3_obj.get(0).selectedIndex;
			var s4_id=s4_obj.get(0).selectedIndex;
			if(!settings.required){
				s0_id--;
				s1_id--;
				s2_id--;
				s3_id--;
				s4_id--;
			};
			if(s===s0_obj) return city_json.list[s0_id].children;
			if(s===s1_obj) return city_json.list[s0_id].children[s1_id].children;
			if(s===s2_obj) return city_json.list[s0_id].children[s1_id].children[s2_id].children;
			if(s===s3_obj) return city_json.list[s0_id].children[s1_id].children[s2_id].children[s3_id].children;
			return null;
		}
		//根据序号隐藏选择框
		var hidSubSelect=function(n){
			if(n<1){
				s1_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s1_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s1_obj.css("visibility","hidden");
				};
			}
			if(n<2){
				s2_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s2_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s2_obj.css("visibility","hidden");
				};
			}
			if(n<3){
				s3_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s3_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s3_obj.css("visibility","hidden");
				};
			}
			if(n<4){
				s4_obj.empty().attr("disabled",false);
				if(settings.nodata=="none"){
					s4_obj.css("display","none");
				}else if(settings.nodata=="hidden"){
					s4_obj.css("visibility","hidden");
				};
			}
		}

		// 赋值地区（县）函数
		var distStart=function(s){
			if($(s).val()==="") return;
			var current_id=s.selectedIndex;
			if(!settings.required){
				current_id--;
			};
			hidSubSelect(getSelectN(s));
			if(current_id<0||typeof(getCityChildren(s))=="undefined"||getCityChildren(s)==null){
				if(settings.nodata=="none"){
					getNextS(s).css("display","none");
				}else if(settings.nodata=="hidden"){
					getNextS(s).css("visibility","hidden");
				};
				return;
			};

            var next_obj=getNextS(s);//获取到下一个组件
            if(next_obj==null) return;
			// 遍历
			temp_html=select_prehtml;
			$.each(getCityChildren(s),function(i,dist){
				temp_html+="<option value='"+dist.node.id+"'>"+dist.node.name+"</option>";
			});
            next_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
            if($(s).val()!==""){
                distStart(next_obj);
            }
		};

		var initCity=function(){
			// 遍历赋值省份下拉列表
			temp_html=select_prehtml;
			$.each(city_json.list,function(i,prov){
				temp_html+="<option value='"+prov.node.id+"'>"+prov.node.name+"</option>";
			});
			s0_obj.html(temp_html);
			distStart(s0_obj);
			// 若有传入省份与市级的值，则选中。（setTimeout为兼容IE6而设置）
			setTimeout(function(){
				if(settings.s0!==null&&settings.s0!==""){
					s0_obj.val(settings.s0);
					distStart(s0_obj);
					setTimeout(function(){
						if(settings.s1!=null){
							if(s1_obj==null) return;
							s1_obj.val(settings.s1);
							distStart(s1_obj);
							setTimeout(function(){
								if(s2_obj==null) return;
								if(settings.s2!=null){
									s2_obj.val(settings.s2);
									distStart(s2_obj);
									setTimeout(function(){
										if(s3_obj==null) return;
										if(settings.s3!=null){
											s3_obj.val(settings.s3);
											distStart(s3_obj);
											setTimeout(function(){
												if(s4_obj==null) return;
												if(settings.s4!=null){
													s4_obj.val(settings.s4);
												};
											},1);
										};
									},1);
								};
							},1);
						};
					},1);
				};
			},1);
            setTimeout(function(){
                // 选择省份时发生事件
                s0_obj.bind("change",function(){
                    distStart(s0_obj);
                });
                s1_obj.bind("change",function(){
                    distStart(s1_obj);
                });
                s2_obj.bind("change",function(){
                    distStart(s2_obj);
                });
                s3_obj.bind("change",function(){
                    distStart(s3_obj);
                });
                s4_obj.bind("change",function(){
                    distStart(s4_obj);
                    setTextObj();
                });
            },50);
		};

        var districts;
        var arrayToTree=function(parentId) {
            var temp = [];
            for (var index in districts) {
                if (districts[index].pId == parentId) {
                    var children=arrayToTree(districts[index].id);
                    temp.push({
                        node: districts[index],
                        children: children
                    });
                }
            }
           return temp;
        };
        var buildTree= function (parentId) {
            var temp = {list:[]};
            for (var index in districts) {
                if (districts[index].id == parentId) {
                    temp.list.push({
                        node: districts[index],
                        children: arrayToTree(districts[index].id)
                    });
                }
            }
            return temp;
        };
		// 设置省市json数据
		if(typeof(settings.url)=="string"){
			city_json=wsCache.get("allCity");
			if(city_json!==undefined&&city_json!==null){
				initCity();
			}
			else {
				$.getJSON(settings.url, function (json) {
                    districts=json;
					city_json = buildTree('320000000000');//前端建好树
					wsCache.set('allCity', city_json, {exp : 60*12});//缓存12*60s
					initCity();
				});
			}
		}else{
			city_json=settings.url;
			initCity();
		};
	};
})(jQuery);



项哥
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js实现多级联动下拉框html+js代码，适合高并发
01-19
三级联动下拉框, 也可以扩展为N级联动, 自动判别 label, value, 速度快，项目中肯定用得到
Bootstrap实现下拉菜单多级联动
08-28
主要为大家详细介绍了Bootstrap实现下拉菜单多级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML学习|初识表单post和get提交、文本框和单选框、按钮、多选框和下拉框、文本域和文件域、搜索框滑块和简单验证、表单的应用、表单初级验证
最新发布
weixin_73149966的博客
05-09 661
form标签是表单，method控制表单提交方式，get方式，表单填写的参数能够在跳转的url地址中看到，post方式是看不到的，action是向何处跳转表单数据input标签，且type=text，是文本输入框，name设置的就是这个输入内容的参数名称input标签，且type=password，是密码输入框，这个输入内容在页面上会变成保密的形式input标签，且type=submit代表这是一个表单的提交按钮，value可以设置这个按钮的名称。
jQuery实现的多选框多级联动插件
12-11
jQuery 实现的多选框联动插件 代码如下: // 使用：$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性”name”和选中的属性”value” // 后台用json格式传输数据 // 格式: { value:的属性”value”, text:的显示文本 } (function($) { $.fn.extend({ autoSelect: function(dest, url) { return this.each(function() {
HTML5中使用option属性实现级联下拉列表
大数据-攻城狮
08-08 5549
<!DOCTYPE> <html> <head> <title>级联下拉列表</title> <meta charset="UTF-8"> </head> <body onload="load()"> <div> <sele...
运用js实现select动态添加option和select联动
shinchan_的专栏
07-17 1035
//1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } //2.添加选项option function addOptio
html多级选项框,HTML中多级联动下拉选择框，动态获取下一级的实现方法
weixin_39606361的博客
06-21 2161
HTML中多级联动下拉选择框，动态获取下一级的实现方法发布时间：2020-10-29 10:54:12来源：亿速云阅读：106作者：小新这篇文章给大家分享的是有关HTML中多级联动下拉选择框，动态获取下一级的实现方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。多级联动下拉选择框，动态获取下一级，每一级数据为xml，可支持无限级(浏览器端需要Microsoft.XMLD...
HTML选择框的联动模板
不一样心情的博客
05-29 2403
以省市为例： 在这里插入代码片 ```<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>省市联动</title> </head> <body onload="add()"> <select na...
实现简单的省市联动(通过HTML和JS)
Kaka_csdn14的博客
11-16 4781
这篇文章主要为大家详细介绍了JavaScript实现简单省市联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html与django实现多级数据联动
LDC，公众号【轻松学编程】
11-10 1266
html与django实现多级数据联动 1、进入页面后先获取年级数据 2、选择年级后获取院级数据 3、选择院级后获取层次数据 4、选择层次数据后获取专业数据
html 动态生成多级联动,JavaScript自定义多级联动浮动菜单[一]
weixin_42109598的博客
06-05 510
烈火网教程 类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎么得到下级菜单结构和容器对象的使用。理想的做法是每次有下级菜单时，从对象直接取得下级菜单结构，放到容器对象中，并且容器能重用，而不是每次都重新生成。但想了很久也想...
JSP、Java实现选择框多级连动
12-03
JSP、Java 实现选择框多级连动 在 Web 开发中，实现选择框多级连动是一个常见的需求。例如，在选择城市地址时，需要根据省份选择城市，根据城市选择县区等等。本文将介绍如何使用 JSP 和 Java 实现选择框多级连动，...
laravel-admin的多级联动方法
10-16
在 Laravel-admin 框架中实现多级联动的方法主要涉及到数据模型、表单构建和前端交互。Laravel-admin 是基于 Laravel 的一个强大的后台管理界面构建工具，它提供了一种便捷的方式来创建美观且易于操作的后台管理系统...
html外部下拉框表格联动,Html下拉框Select联动实例
weixin_33359523的博客
06-07 1735
在开发网站时，经常会有二个或多个select下拉框联动的情况，比如省份和城市二个下拉框联动，在省份下拉框里选择不同的省，第二个下拉框城市就要对应该省份下的城市数据。下面一起来看下，怎么用Javascript生成这样的联动下拉框。01、首先，看下我们定义的二个数组的数据，一个arr_class，是班级数据(每条数据包括班级id和班级名称)另一个是arr_stu，是学生数据(每条数据包括学生id，所属...
option--三级联动
Charles D
03-30 523
1.数据库 CREATE TABLE `student` (   `id` int(50) NOT NULL auto_increment,   `name` varchar(50) collate utf8_unicode_ci NOT NULL,   `dept` varchar(50) collate utf8_unicode_ci NOT NULL,   `class` varc
HTML 高级选择器
m0_65066169的博客
10-02 576
HTML 高级选择器
html select联动,select标签实现二级联动
weixin_39735012的博客
06-07 1834
效果如下图所示：实现的原理：使用onchange事件，原理见代码html代码：魏国蜀国吴国script代码：var select = document.getElementById("select");select.onchange=function(){var selvalue = select.value;var val = document.getElementById("val");swi...
html jquery 三级分类选择框（弹出式）可用于三级城市选择，职位分类选择，行业分类选择等
xudejun的博客
02-12 1984
父级页面 &lt;div class="form-group col-md-6"&gt; &lt;label&gt;职位类型&lt;/label&gt; &lt;input type="text" readonly class="form-control" name="job_cat_
uniapp多级联动复选框
05-30
Uniapp多级联动复选框可以通过使用uni-form组件配合v-for指令和computed计算属性实现。以下是一个简单的示例代码： ```html 选择地区"> (province, pIndex) in provinces" :key="pIndex" :label="province....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值