在component中创建了一个下拉菜单的自定义组件，现在是要如何在page页面中获取到下拉菜单的值，并插入到数据库中，效果如图：
我的代码如下，求大师们帮忙
<!--components/selecttwo/selectteo.wxml-->
<!--下拉选框-->
<viewclass="list-select">
<viewclass="position">招聘职位</view>
<viewclass="select-box">
<viewclass="select{{shownavindex==1?'active':''}}"bindtap="list"data-nav="1">
<viewclass="content">{{quanbu_name}}</view>
</view>
</view>
<viewclass="icon-group">
<viewclass="select{{shownavindex==1?'active':''}}"bindtap="list"data-nav="1">
<iconclass="icon"></icon>
</view>
</view>
</view>
<!--选择工种标签-->
<viewclass="gongzhong{{gzopen?'slidown':'slidup'}}{{gzshow?'disappear':''}}">
<viewclass="gzgz-left">
<viewclass="view{{select1==index?'current1':''}}"wx:for="{{gz}}"wx:key="key"bindtap="gzselectLeft"
data-index='{{index}}'>
{{index}}
</view>
</view>
<viewclass="gzgz-right">
<viewclass="view{{select2==item?'current2':''}}"wx:for="{{gzright}}"wx:key="key"wx:if="{{gzright}}"
bindtap='gzselectRight'data-index="{{item}}">
<text>{{item}}</text>
</view>
</view>
<viewclass='form-btn'>
<buttonclass='btn-reset'bindtap='gzEmpty'>重置</button>
<buttonclass='btn-submit'bindtap='gzFilter'>确定</button>
</view>
<viewclass="fullbg{{isfull?'fullopacity':''}}"bindtap="hidebg"></view>
</view>
/*components/selecttwo/*/
.list-select{
/*字体类型*/
font-family:'PingFangSC',/*平方简*/
'HelveticaNeue',/*新的赫维提卡字体*/
Helvetica,/*赫维提卡字体*/
'DroidSansFallback',/*默认字体*/
'MicrosoftYahei',/*微软雅黑*/
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:1pxsolid#cfcece;*/
width:100%;
display:block;
font-size:30rpx;
justify-content:center;
flex-direction:row;
border-bottom:1pxsolid#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:1pxsolid#cfcece;
}
.icon{
display:inline-block;
border:10rpxsolidtransparent;
/*三角形边框*/
border-top:10rpxsolid#666;
/*上边框*/
margin-left:10rpx;
/*左边距*/
margin-top:10rpx;
/*右边距*/
}
.current1{
color:#da3131;
}
.current2{
color:#da3131;
}
.slidown{
display:block;
animation:slidown0sease-inboth;
}
@keyframesslidown{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0%);
}
}
@keyframesslidup{
from{
transform:translateY(0%);
}
to{
transform:translateY(-100%);
}
}
.slidup{
display:block;
top:0rpx;
animation:slidup0sease-inboth;
}
.form-btn{
wid
//components/selecttwo/
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:网页链接 })
}},
//点击灰色背景隐藏所有的筛选内容
hidebg:function(e){
this.setData({
gzopen:false,
gzshow:true,
isfull:false,
shownavindex:0,
})},
//选择工种第一栏选择内容
gzselectLeft:function(e)
<--wxml-->
<selecttwoname="position"/>
代码复制过去可以直接调试
我的代码如下，求大师们帮忙
<!--components/selecttwo/selectteo.wxml-->
<!--下拉选框-->
<viewclass="list-select">
<viewclass="position">招聘职位</view>
<viewclass="select-box">
<viewclass="select{{shownavindex==1?'active':''}}"bindtap="list"data-nav="1">
<viewclass="content">{{quanbu_name}}</view>
</view>
</view>
<viewclass="icon-group">
<viewclass="select{{shownavindex==1?'active':''}}"bindtap="list"data-nav="1">
<iconclass="icon"></icon>
</view>
</view>
</view>
<!--选择工种标签-->
<viewclass="gongzhong{{gzopen?'slidown':'slidup'}}{{gzshow?'disappear':''}}">
<viewclass="gzgz-left">
<viewclass="view{{select1==index?'current1':''}}"wx:for="{{gz}}"wx:key="key"bindtap="gzselectLeft"
data-index='{{index}}'>
{{index}}
</view>
</view>
<viewclass="gzgz-right">
<viewclass="view{{select2==item?'current2':''}}"wx:for="{{gzright}}"wx:key="key"wx:if="{{gzright}}"
bindtap='gzselectRight'data-index="{{item}}">
<text>{{item}}</text>
</view>
</view>
<viewclass='form-btn'>
<buttonclass='btn-reset'bindtap='gzEmpty'>重置</button>
<buttonclass='btn-submit'bindtap='gzFilter'>确定</button>
</view>
<viewclass="fullbg{{isfull?'fullopacity':''}}"bindtap="hidebg"></view>
</view>
/*components/selecttwo/*/
.list-select{
/*字体类型*/
font-family:'PingFangSC',/*平方简*/
'HelveticaNeue',/*新的赫维提卡字体*/
Helvetica,/*赫维提卡字体*/
'DroidSansFallback',/*默认字体*/
'MicrosoftYahei',/*微软雅黑*/
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:1pxsolid#cfcece;*/
width:100%;
display:block;
font-size:30rpx;
justify-content:center;
flex-direction:row;
border-bottom:1pxsolid#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:1pxsolid#cfcece;
}
.icon{
display:inline-block;
border:10rpxsolidtransparent;
/*三角形边框*/
border-top:10rpxsolid#666;
/*上边框*/
margin-left:10rpx;
/*左边距*/
margin-top:10rpx;
/*右边距*/
}
.current1{
color:#da3131;
}
.current2{
color:#da3131;
}
.slidown{
display:block;
animation:slidown0sease-inboth;
}
@keyframesslidown{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0%);
}
}
@keyframesslidup{
from{
transform:translateY(0%);
}
to{
transform:translateY(-100%);
}
}
.slidup{
display:block;
top:0rpx;
animation:slidup0sease-inboth;
}
.form-btn{
wid
//components/selecttwo/
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:网页链接 })
}},
//点击灰色背景隐藏所有的筛选内容
hidebg:function(e){
this.setData({
gzopen:false,
gzshow:true,
isfull:false,
shownavindex:0,
})},
//选择工种第一栏选择内容
gzselectLeft:function(e)
<--wxml-->
<selecttwoname="position"/>
代码复制过去可以直接调试
