功能说明
① 选择自定义输入
② 弹出输入框进行输入
③ 输入完后自动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() {}
});
已经写的很明白了吧?已经删掉不必要的代码了,简洁明了