如图下拉菜单，因数据太多，不想用微信开发中的多列选择器区完成这个功能，不够直观，所以想用自定义的组件，该如何插入到数据库中，求大师帮助。

component中wxlm代码：

<!--下拉选框-->
<view class="list-select">
    <view class="position">招聘职位</view>
    <view class="select-box">
        <view class="select {{shownavindex == 1? 'active' : ''}}" bindtap="list" data-nav="1">
            <view class="content" >{{quanbu_name}}</view>
        </view>
    </view>
    <view class="icon-group">
        <view class="select {{shownavindex == 1? 'active' : ''}}" bindtap="list" data-nav="1">
            <icon class="icon"></icon>
        </view>
    </view> 
</view>
<!--选择工种标签-->
<view class="gongzhong  {{gzopen ? 'slidown' : 'slidup'}} {{gzshow ? 'disappear':''}}">
    <view class="gz gz-left">
        <view class="view {{select1 == index ? 'current1' : ''}}" wx:for="{{gz}}" wx:key="key" bindtap="gzselectLeft"
            data-index='{{index}}'>
            {{index}}
        </view>
    </view>
    <view class="gz gz-right">
        <view class="view {{select2 == item?'current2':''}}" wx:for="{{gzright}}" wx:key="key" wx:if="{{gzright}}"
            bindtap='gzselectRight' data-index="{{item}}">
            <text>{{item}}</text>
        </view>
    </view>
    <view class='form-btn'>
        <button class='btn-reset' bindtap='gzEmpty'>重置</button>
        <button class='btn-submit' bindtap='gzFilter'>确定</button>
    </view>
    <view class="fullbg {{isfull ?'fullopacity':''}}" bindtap="hidebg"></view>
</view>
js代码：
Component({


  /**
   * 组件的属性列表
   */
  properties: {
     
  },
  /**
   * 组件的初始数据
   */
  data: {
    quanbu_name:"请选择您的招聘职位",
    gz:{
      
      "计算机/互联网/通信/电子":["技术工程师","机械设计","PLC编程", "车工","焊工","铣工","磨床","","车工",],
      "后端开发":["Java开发工程师","PHP开发工程师","C/C++开发工程师",   "Python开发工程师","NET开发工程师","C#开发工程师","Ruby开发工程师","Go开发工程师","大数据开发工程师","Hadoop工程师","爬虫开发工程师","脚本开发工程师","多媒体开发工程师","GIS开发工程师","全栈开发工程师","ERP开发工程师","区块链开发","高级软件工程师","软件工程师","系统架构设计师","系统分析员","技术文员/助理","技术文档工程师","其他",],
      "自动化技术":["钳工","焊工","电工","调试",],
    },
    gzopen: false, //选择工种筛选弹窗
    gzshow: true,
    isfull: false,
    select1: '', //选中后的第二个子菜单，默认显示工种下的子菜单
    select2: '', //选择部分的中间
    shownavindex: '',
    gzIndex: 0,
  },
  onLoad: function (options) {
    this.setData({
      select:!this.data.select
    })
  },


  /**
   * 组件的方法列表
   */
  methods: {
     // 列表下拉框是否隐藏
  list: function(e) {
    if (this.data.gzopen) {
      this.setData({
        content: this.data.nv,
        gzopen: false,
        gzshow: false, 
        isfull: false,
        shownavindex: 0
      })
    } else {
      this.setData({
        gzopen: true,
        gzshow: false,
        isfull: true,
        shownavindex: e.currentTarget.dataset.nav
      })
    }
  },
  // 点击灰色背景隐藏所有的筛选内容
  hidebg: function(e) {
    this.setData({
      gzopen: false,
      gzshow: true,
      isfull: false,
      shownavindex: 0,
    })
  },
  // 选择工种第一栏选择内容
  gzselectLeft: function(e) {
    // console.log(e);
    var name=e.currentTarget.dataset.index;
    // console.log('用户选中左边菜单栏的索引值是：'+e.target.dataset.index);
    this.setData({
      quanbu_name:name,
      gzright:this.data. gz[e.currentTarget.dataset.index],
      select1: e.target.dataset.index,
    });
  },
  // 选择工种右边栏选择的内容
  gzselectRight: function(e) {
    // console.log(e);
    var name=e.currentTarget.dataset.index;
    // console.log(''+e.currentTarget.dataset.index);
    this.setData({
      quanbu_name:name,
      select2: e.currentTarget.dataset.index
    });
  },
  // 选择工种清空筛选项
  gzEmpty: function() {
    this.setData({
      select1: '',
      select2: '-1'
    })
  },
   // 选择工种筛选项后，点击提交
   gzFilter: function() {
    // console.log('选择的一级选项是：' + this.data.select1);
    // console.log('选择的二级选项是：' + this.data.select2);
    // 隐藏选择工种下拉框
    this.setData({ 
      gzopen: false,
      gzshow: false,
      isfull: false,
      shownavindex: 0
    })
  },
  
  }
})
ppage中wxlm代码：
<selecttwo wx:for-item="{{selecttwo}}" ></selecttwo>