根据JSON自动生成select联动

公用js

var CreateSelect = function (obj) {this.__ID__ = 0;this.$dom = $(obj.dom);this.selectList = obj.data;this.onChange = obj.onChange;this.init();}CreateSelect.prototype = {// 初始化init() {this.initData();this.initCreateBox();this.bindEvent();},// 给每个item赋一个id，方便后面查找initData: function () {var list = this.selectList.list;var id = 0;var bindId = function (_list) {_list.map(item => {item.__ID__ = id++;if (item.childs) {bindId(item.childs.list);}});}bindId(list);},// 返回一个option结构（列表）createOption: function (arr, _value) {console.log(_value)var option = function (obj) {var selected = _value && obj.value == _value ? 'selected' : '';return '<option value="' + obj.value + '" data-id="' + obj.id + '" ' + selected + ' >' + obj.text + '</option>'};var options = '';for (var i = 0; i < arr.length; i++) {var item = arr[i];var text = item.text;var value = item.value || text;var id = item.__ID__;options += option({text: item.text,value: value,id: id});}return options;},createBox(node, label = "") {return '<div class="create-select"> <div class="create-select-label">' + label + '</div> ' + node + '</div>'},// 返回一个Select+Option的结构createSelect: function (arr, label, value) {var select = (optionNode) => {let id = this.__ID__++;return '<select data-id="' + id + '">' + optionNode + '</select>'};var options = this.createOption(arr, value);return this.createBox(select(options), label);},// 初始化创建SelectinitCreateBox(valueArr) {$dom = this.$dom;var data = this.selectList;var selects = '';let index = 0;var createSelect = (data) => {var childs = data.list[0].childs;var selectValue = '';if (valueArr && valueArr[index]) {var valueItem = this.getItemByValue(valueArr[index].value, data.list);if (valueItem) {childs = valueItem.childs;selectValue = valueItem.value;}}var select = this.createSelect(data.list, data.label, selectValue);selects += select;index++;if (childs) {createSelect(childs);}}createSelect(data);$dom.html(selects);},// 刷新后面的optionsreloadOptions(id) {$box = this.$dom;let item = this.getItemById(id);let createRight = (item) => {let childs = item.childs;if (childs) {$box.append(this.createSelect(childs.list, childs.label));let firstChilds = childs.list[0].childs;if (firstChilds) {$box.append(this.createSelect(firstChilds.list, firstChilds.label));createRight(firstChilds.list);}}};createRight(item);},// 根据value查找传入list的item;getItemByValue(value, list) {for (let i = 0; i < list.length; i++) {if (list[i].value == value) {return list[i]}}return null;},// 根据id获取itemgetItemById(id) {var list = this.selectList.list;var getId = function (_list) {for (let i = 0; i < _list.length; i++) {let item = _list[i];if (item.__ID__ == id) {return item;}if (item.childs) {let idItem = getId(item.childs.list);if (idItem) {return idItem}}};return null;};let itemById = getId(list);return itemById;},// 获取valuesgetValue() {let arr = [];let that = this;this.$dom.find('select option:selected').each(function () {let id = $(this).data('id');let item = that.getItemById(id);arr.push(item)});return arr;},setValue(arr) {console.log('go')this.initCreateBox(arr);},// 绑定事件bindEvent: function () {var that = this;this.$dom.on('change', 'select', function () {var $selectedOption = $(this).find('option:selected');var id = $selectedOption.data('id');var selectId = $(this).data('id');that.$dom.find('select[data-id="' + selectId + '"]').parents('.create-select').find('~.create-select').remove();that.reloadOptions(id);that.onChange && that.onChange(that.getValue());});}};

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="jquery.js"></script><script src="createSelect.js"></script><title>createSelect</title><style type="text/css">.create-select {display: flex;align-items: center;margin: 10px 0;}.create-select .create-select-label {color: #666;width: 100px;text-align: right;margin-right: 10px;}.create-select select {height: 30px;padding: 0 10px;min-width: 120px;}</style>
</head><body><div id="test"></div><script>var select = new CreateSelect({dom: '#test',data: {label: '客户分类',list: [{text: '起亚客户',value: '0',childs: {label: '制作费用',list: [{text: '标准合同',value: '0',childs: {label: '类型',list: [{text: '灯箱广告',value: '0'}, {text: '电梯看板',value: '1'}, {text: '驾校',value: '2'}, {text: '楼宇液晶',value: '3'}]}}, {text: '含制作费',value: '1',childs: {label: '类型',list: [{text: '灯箱广告',value: '0'}, {text: '电梯看板',value: '1'}, {text: '驾校',value: '2'}]}}]}}, {text: '非起亚客户',value: '1',childs: {label: '制作费用',list: [{text: '电台',value: '0'}, {text: '楼宇液晶',value: '1'}, {text: '纸媒',value: '2'}, {text: '桌贴',value: '3'}]}}]},onChange(arr) {console.log(arr)}});//获取下拉组合的的集合function getSelectValue(){if(!select){return '';}var arr = select.getValue();var a = [];arr.map(item => {a.push(item.value);});return a.join('_');}//获取下拉组合的的文本function getSelectValueTest(){if(!select){return '';}var arr = select.getValue();var a = [];arr.map(item => {a.push(item.text);});return a.join('-');}console.log("getSelectValue=="+getSelectValue());console.log("getSelectValue=="+getSelectValueTest());</script>
</body></html>

插件下载地址

根据JSON自动生成select联动相关推荐

quicktype游戏java程序_使用QuickType工具从json自动生成类型声明代码
一.QuickType 工具功能简介 QuickType 是一款可以根据 json 文本生成指定语言(如 Type Script,C++,,Java,C#,Go 等)类型声明代码的工具. 例如我们在写 ...
Unity编译器《策划表编表工具》 Excel转Json自动生成解析c#代码
Unity编译器 <策划表编表工具> Excel转Json自动生成解析c#代码 1.表格数据结构解释 2.Excel文件路径 3.C#代码与Json自动生成路径点击下载依赖Dll程序集 ...
解析json自动生成表格
代码业务说明: 将一个含有学生信息的josn字符串中信息解析出来,并将里面的内容添加到表格中. 假设:从java程序后端传递进来一个如下json字符串 "{"total" ...
.NetCore2.1 WebAPI 根据swagger.json自动生成客户端代码
前言上一篇博客中我们可以得知通过Swagger插件可以很方便的提供给接口开发者在线调试,但是实际上Swagger附带的功能还有很多, 比如使用NSwag生成客户端调用代码,进一步解放接口开发者. N ...
JSON自动生成相关类
开源项目地址:https://jsonclassgenerator.codeplex.com/SourceControl/latest 太好用了,这个转载于:https://www.cnblogs. ...
java插件开发_编写一个IDEA插件之：自动生成Java代码
我很喜欢IDEA的一键自动生成代码功能,例如自动生成构造方法.字段的Get/Set方法.ToString方法等等,除此之外,也有一些插件提供自动生成代码的功能,例如我们所熟悉的GsonFormat插件 ...
egret 自动生成代码插件 EgretAutoCodeEui vscode,wing可以使用
EgretAutoCodeEui 根据当前编辑器中的exml 文件生成对应的代码,减少重复劳动 github 地址使用说明: 1.在编辑器中打开当前需要导出的exml文件. 2.按下快捷键F12 导 ...
使用 API 自动生成工具优化前端工作流
文章目录 1. 使用Api管理平台导出swagger.json文件 2. 使用swagger.json导入easy-mock 3. 使用easy-mock-cli生成js格式Api 在工作中,我们的前 ...
懒人小工具1：winform自动生成Model,Insert,Select,Delete以及导出Excel的方法
懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法 github地址:https://github.com/Jimmey-Jiang/J ...

根据JSON自动生成select联动

根据JSON自动生成select联动相关推荐

最新文章

热门文章