问怎么改成下拉框？

<!--pages/ml/ml.wxml-->

<view class="ml">

<view wx:for="{{books}}" wx:key="index" bindtap="showBookContent" data-index="{{index}}">

{{item.title}}

</view>

</view>

------------------------------------------------------------

<view class="lr">

<view hidden="{{!showContent}}">

<text>{{currentContent}}</text>

</view>

</view>

pages/ml/ml.js

Page({

    data: {

      books: [

{

            title: '考试题（A卷）',

            content: '考试题（A卷） \n一、单选题 (共50题) \n1. 电焊机的外壳应可靠接地，接地电阻不得大于（ A ）。(1.0分)\nA: 4Ω\n B: 6Ω    \n C: 8Ω\n D: 10Ω\n 2. 使用携带型火炉或喷灯时，火焰与带电部分的距离：电压在10kV及以下者，不得小于1.5m；电压在10kV以上者，不得小于( D )m。(1.0分)\n A: 1.5    \n B: 2 \n C: 2.5   \n D: 3 \n'

},

{

            title: '第二章',

            content: '内容2'

},

// ... 其他书籍章节

      ],

      currentContent: '',

      showContent: false,

},

showBookContent: function(e) {

const index = e.currentTarget.dataset.index;

this.setData({

        currentContent: this.data.books[index].content,

        showContent: true

});

}

});

请大老帮忙把下面这个改成下拉框谢谢

<view wx:for="{{books}}" wx:key="index" bindtap="showBookContent" data-index="{{index}}">

{{item.title}}

</view>