wxml代码

<view class='top-selected' bindtap='bindShowMsg'><text>{{grade_name}}</text>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}"><view wx:for="{{grades}}" wx:key="unique"><view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view></view>
</view>

js代码

Page({data: {select:false,grade_name:'--请选择--',grades: ['北京市','深圳市','上海市','广州市',]},bindShowMsg() {this.setData({select: !this.data.select})},/*** 已选下拉框*/mySelect(e) {console.log(e)var name = e.currentTarget.dataset.namethis.setData({grade_name: name,select: false})},  })

wxss代码

/* 顶部 */
.top{width: 400rpx ;height: 80rpx;padding: 0 20rpx;border: 1px solid;line-height: 80rpx;font-size: 34rpx;border-bottom: 1px solid #000;}/* 下拉框 */.top-selected{width: 100px;border: 1px solid #ccc;padding: 0 10rpx;}/* 下拉内容 */.select_box {background-color: #fff;width: 100px;position: relative;right: 0;z-index: 1;text-align: left;font-size: 30rpx;}.select_one {padding-left: 20rpx;width: 100%;height: 60rpx;position: relative;line-height: 60rpx;border: 1px solid #ccc;}