如何获取小程序picker表单普通选择器的值

最新推荐文章于 2025-05-20 11:11:30 发布

原创最新推荐文章于 2025-05-20 11:11:30 发布 · 1.4w 阅读

17 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

21 篇文章

订阅专栏

本文详细解析了小程序中picker组件的正确使用方法，强调了官方文档中关于value属性的定义——其代表的是数组下标而非实际值。文章提供了两种获取选中项实际值的有效方法，并附带了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天用小程序的picker组件时，遇到遇到了picker组件的坑，相信很多不仔细

看官方文档的同学们也会遇到，这里就简单记录下：

官方文档上写了value是下标不是值；

value

Number

value 的值表示选择了 range 中的第几个（下标从 0 开始）

官方提供的例子：

console.log('picker发送选择改变，携带值为', e.detail.value)

打印结果如下：

官方这里有个误导，携带值让第一眼看到的人都以为这里

e.detail.value就是选中项的值，其实只是选中项的下标；

那么如何才能打印出值呢？

下面提供几种方法：

xml:

<view class="section">
	<view class="section__title">普通选择器</view>
	<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
		<view class="picker"> 当前选择：{{array[index]}} </view>
	</picker>
</view>

js：

data: {
    array:
        [
        '夏彤','陈学华','甘广','黄龙流','李昌略','董俊辉','罗景盛','钟敏君','林锐','麦健发','曹兵'
        ],

    objectArray: 
        [ 
            { id: 0, name: '夏彤' }, { id: 1, name: '陈学华' }, { id: 2,
            name: '甘广' }, { id: 3, name: '黄龙流' }, { id: 4, name: '李昌略' }, { id: 5,
            name: '董俊辉 ' }, { id: 6, name: '罗景盛' } , { id: 7, name: '钟敏君' } , { id:
            8, name: '林锐' } , { id: 9, name: '麦健发' } , { id: 10, name: '曹兵' } 
        ]
}

关键是这个函数：

方法1：

	bindPickerChange: function (e) {
	    var index = this.data.index //记得要声明的，不然打印是undifind
	    console.log('picker发送选择改变，携带下标为', e.detail.value)
	    console.log('picker发送选择改变，携带值为', this.data.array[index])

	    this.setData({
	    index: e.detail.value
	    })
	    }

方法2：

	bindPickerChange: function (e) {
	console.log('picker发送选择改变，携带下标为', e.detail.value)
	console.log('picker发送选择改变，携带值为', this.data.array[e.detail.value])
	this.setData({
	index: e.detail.value
	})
	}

打印结果如下：

e；detail.v