weui之Picker多列选择情况下改变一列值时改变另一列的选值范围

最新推荐文章于 2026-03-28 09:30:38 发布

原创最新推荐文章于 2026-03-28 09:30:38 发布 · 538 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文介绍了如何使用JavaScript的Picker组件实现在时间选择器中，根据左边选择的值（08或非08）动态调整右边取值范围。关键点在于添加onChange事件监听并相应地更新右侧值列表。

效果展示：

当左边取值为08时，右边的取值范围为15 30 45

当左边取值不为08时，右边的取值范围为00 15 30 45

实现

$("#StartTime_Select").picker({
                    title: "",
                    value: [timeFormat(initStartTime[0]), timeFormat(initStartTime[1])],
                    cols: [
                        {
                            textAlign: 'center',
                            values: (function () {
                                for (var hoursTime = [], k = 8; k <= 18; k++) {
                                    if (k.toString().length === 1) { k = '0' + k; }
                                    hoursTime.push(k);
                                }
                                return hoursTime
                            })(),
                            onChange: function (p, v) {
                                // 当第一列选项变化时，动态更新第二列的数据
                                if (v === '08') {
                                    p.cols[1].replaceValues("15 30 45".split(" "));
                                } else {
                                    p.cols[1].replaceValues("00 15 30 45".split(" "));
                                }
                            }
                        },
                        {
                            textAlign: 'center',
                            values: (function () {
                                return "15 30 45".split(" ");
                            })()
                        }
                    ],
                    onClose: function (p, v, d) {                       
                    }
                });

重点就在于，在你需要监听改变的那一列里面加onChange事件

p是当前选择器；v是Change事件后当前选择的值

标签