微信小程序下拉框选项框组件—点击自定义输入，弹出输入框获取值实例

功能说明

① 选择自定义输入

 

② 弹出输入框进行输入

 

 ③ 输入完后自动selected

④ 再点击下拉框值还在，也还可以自定义输入

 

上代码

wxml代码

<view class="datum-item clearfix">
        <view class="datum-title">
            <text>銀行名稱</text>
        </view>
        <view class="datum-con">
            <picker bindchange="bindBankName" value="{{BankName_index}}" range="{{BankName_arr}}" name="BankName">
                <view class="datum-date" wx:if="{{BankName_index==''}}">
                  請選擇存款銀行
                </view>
                <view class="datum-date hover" wx:else>
                    {{BankName_arr[BankName_index]}}
                </view>
            </picker>
        </view>
    </view>

bindBankName    BankName_arr     BankName_index

以上3个关键词是我的项目的，你自己的项目可自行更改，wxml和js要一起修改

js的

BankName_arr     数组可删掉加自己要的值

BankName_index  为0即可，无需修改

 js代码

Page({
    data: {
        BankName_arr: [ "招商銀行","自定义输入" ],
        BankName_index: 0
    },
    onLoad: function(e) {
    },

    bindBankName: function(e) {
      var that=this;
      if(that.data.BankName_arr[e.detail.value]=="自定义输入"){
        wx.showModal({
          editable:true,
          placeholderText: '请输入存款银行',
          success: function(res) {  
            
            if (res.confirm) {
              console.log("自定义存款银行", res.content)
              that.setData({
                BankName_arr: that.data.BankName_arr.concat(res.content),
                BankName_index: that.data.BankName_arr.length
              });
              console.log("BankName_arr",  that.data.BankName_arr)
            }

          }
         })
      }else{
        this.setData({
          BankName_index: e.detail.value
        });
      }
      
  },

    onShareAppMessage: function() {}
});

已经写的很明白了吧？已经删掉不必要的代码了，简洁明了