实现点击添加多条信息,且信息其中一个字段为picker下拉字段

实现点击添加多条信息,且信息其中一个字段为picker下拉字段

//wxml文件

<block wx:for="{{lists}}" wx:key="{{index}}" >
  <view class="xx">
    <view>
      <picker bindchange="bindtest1" data-id="{{index}}"  value="{{hosList[index_test1].id}}" range="{{hosList}}" range-key="{{'name'}}" data-selecthx="{{hosList[index_test1].name}}">
        <view >
          <text decode="{{true}}" value="{{lists[index][3]}}">产品信息{{index}}: {{lists[index][3]}}</text>
        </view>
      </picker>
    </view>
  </view>
  <input class='create-li' data-id="{{index}}" value='{{lists[index][0]}}' placeholder="选项1" bindinput='bindKeyInput'></input>
  <input class='create-li' data-id="{{index}}" value='{{lists[index][1]}}' placeholder="选项2" bindinput='bindKeyInput2'></input>
</block>
<button class='add-li' bindtap='addList'>添加选项</button>
<button class='add-li' bindtap='delList'>删除选项</button>


js代码
 bindKeyInput: function(e) {
    var that = this;
    var index = e.currentTarget.dataset.id; //使用event.currentTarget.dataset.XX获取内容
    that.setData({
      text: e.detail.value
    })
    that.data.lists[index][0] = that.data.text;
    console.log("index1", index);
    console.log("value1", that.data.lists[index][0]);
  },
  bindKeyInput2: function(e) {
    var that = this;
    var index2 = e.currentTarget.dataset.id; //使用event.currentTarget.dataset.XX获取内容
    that.setData({
      text: e.detail.value
    })
    that.data.lists[index2][1] = that.data.text;
    console.log("index2", index2);
    console.log("value2", that.data.lists[index2][1]);
  },
  bindtest1(e) {
    var that = this;
    var index3 = e.currentTarget.dataset.id;
    that.setData({
      index_test1: e.detail.value,
      depid: that.data.hosList[e.detail.value].id,
      depname: that.data.hosList[e.detail.value].name,
      [`lists[${index3}][2]`]: that.data.hosList[e.detail.value].id,
      [`lists[${index3}][3]`]: that.data.hosList[e.detail.value].name,
    })
    // that.data.lists[index3][2] = that.data.depid;
    // that.data.lists[index3][3] = that.data.depname;
    console.log("---------------------------------------");
    console.log("0.index3", index3);
    console.log("1.index_test1", e.detail.value);
    console.log("2.depid", that.data.depid);
    console.log("3.name", that.data.depname);
    console.log("4.that.data.lists[index3][2]", that.data.lists[index3][2]);
    console.log("5.that.data.lists[index3][3]", that.data.lists[index3][3]);
    console.log("6,list",that.data.lists)
  },

即可实现点击添加选项,选项字段可输入可下拉选择。

点击添加按钮即可添加三条信息,包含下拉菜单和两个输入框

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值