在微信小程序中，微信小程序中picker组件，不够直观，所以在component中自定义了一个二级下拉菜单组件，现在不知道该如何把下拉菜单中的数据插入到数据库中去，求大师们的帮助，代码可以直接复制过去进行调试。如果能视频类教程更好，效果如图：
详细代码如下：
<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>
/* components/selecttwo/selectteo.wxss */
.list-select{
/*字体类型*/
font-family: 'PingFang SC',/*平方简*/
'Helvetica Neue',/*新的赫维提卡字体*/
Helvetica,/*赫维提卡字体*/
'Droid Sans Fallback',/*默认字体*/
'Microsoft Yahei',/*微软雅黑*/
sans-serif;/*无衬线体*/
height: 100%;/*高度*/
background: #fff;/*背景颜色*/
overflow: hidden;/*溢出隐藏*/
align-items:center;
display:flex;
flex-direction:row;
}
.list-select .position{
font-size:32rpx;
flex-basis:160rpx;
}
.select-box {
/* position: relative; */
/*相对定位*/
/* z-index: 99; */
/*属性设置元素堆叠顺序，参数越大越靠前*/
/* display: flex;弹性布局 */
/* flex:1;
background: #fff;
justify-content:space-around;
width:0;
border-bottom:1px solid #cfcece; */
width: 100%;
display: block;
font-size: 30rpx;
justify-content: center;
flex-direction: row;
border-bottom: 1px solid #cfcece;
text-align: center;
}
.select {
display: flex;
flex:1;
text-align: center;/*水平对齐*/
height: 40rpx;
align-items: center;/*居中对齐*/
justify-content: center;/*水平居中*/
font-size: 28rpx;
white-space: nowrap;/*强制内容在一行显示*/
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*溢出隐藏*/
}
.content {
display: inline-block;/*内块元素，从左到右排列*/
font-size: 28rpx;
color: #666;
}
.icon-group{
flex-basis:30rpx;
display:flex;
flex-direction:row-reverse;
margin-right:10rpx;
border-bottom:1px solid #cfcece;
}
.icon {
display:inline-block;
border: 10rpx solid transparent;
/*三角形边框*/
border-top: 10rpx solid #666;
/*上边框*/
margin-left: 10rpx;
/*左边距*/
margin-top: 10rpx;
/*右边距*/
}
.current1 {
color:#da3131;
}
.current2 {
color: #da3131;
}
.slidown {
display: block;
animation: slidown 0s ease-in both;
}
@keyframes slidown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0%);
}
}
@keyframes slidup {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
.slidup {
display: block;
top:0rpx;
animation: slidup 0s ease-in both;
}
.form-btn {
width: 100%;
display: flex;
height: 98rpx;
font-size: 32rpx;
justify-content: center;
align-items: center;
}
.btn-reset {
background-color: #999;
}
.btn-submit {
background-color: #e35b27;
color: #fff;
}
.gongzhong {
position:absolute;/*绝对定位*/
right:0;
width:100%;
height: 900rpx;
z-index: 5;/*属性设置元素堆叠顺序，参数越大越靠前*/
background: #fff;
}
.gongzhong .gz {
overflow-y: scroll;
float: left;
width: 50%;
height: 82%;
line-height: 80rpx;/*行高*/
box-sizing: border-box;/*盒子模型：宽高包含了内容，距离，和边框*/
font-size: 28rpx;
color: #717273;
border-right: 1rpx solid #f4f4f4;/*右边框线*/
}
.gz .view {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-left: 45rpx;
border-bottom: 1rpx solid #f4f4f4;
}
.gz-right {
background: #f5f5f5;
}
.slidedown/*滑动效果及点击空白隐藏*/ {
transform: translateY(0%);/*像素位移*/
}
// components/selecttwo/selectteo.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
})
},
}
})
<selecttwo name="position"></selecttwo>
