微信小程序 picker+input组件 下拉选择框可文本框输入内容实例

最近做一个拼车小程序有一个需求：可以选择社区作为出发点，也可以输入出发点信息。
参考了一位大佬的帖子做了一个下拉选择框可手动输入的实例。
参考原文：https://blog.csdn.net/yelin042/article/details/79078068

下面是我的代码：

样式我是用weui的样式库

<!-- html -->
<view class="weui-cell__bd">
    <picker id="start_picker" bindchange="bindPickerChange" value="{{villageOptions.id}}"  range="{{villagelist}}">
        <view class="weui-input">
        {{villageOptions[start_villageIndex].name}}
        </view>
    </picker>
    <view class="section {{start_reply?'on':'off'}}">
        <input id="start_input" class="weui-input" bindblur="inputVillage" name="other" placeholder="请输入出发地点"  type="text"/>
    </view>
</view>

/* css */
.section{font-size:28rpx}
.on{display: block}
.off{display: none}

//js
Page({
	data:{
		villagelist:[],//显示小区范围
	    villageOptions: [
    		{id:0,name:'奥尔良社区'},
	    	{id:1,name:'辣翅社区'},
	    	{id:-1,name:'手动输入'}
	    ],//小区列表
	    start_villageIndex: -1,//小区picker中的index
	    start:'',//选择出发社区
	    inputStart:'',//输入出发地
	},
	//小区列表更改
   bindPickerChange(e) { 
    let that = this;
    let index = e.detail.value;
    that.pickerChange(that.data.villageOptions[index].id,index);
  },
  //输入选择框的选定
  pickerChange(id,index) { 
      if (id == -1) {//手动输入
        this.setData({
          start_reply: true,
        })
      } else {//选择社区id
        this.setData({
          start_reply: false,
        })
      }
      this.setData({
        start_villageIndex: index,
        start:id
      })
  },
  //输入出发地点
  inputVillage(e) { 
      this.setData({
        inputStart:e.detail.value,
      })
  },
})

总结：欢迎评论讨论，谢谢各位大神指点迷津