根据JSON自动生成select联动
生活随笔
收集整理的這篇文章主要介紹了
根据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联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jquery实现form表单回填数据
- 下一篇： Sping中利用HandlerExcep