专栏首页前端开发随笔jQueryWEUI使用picker实现二级联动

jQueryWEUI使用picker实现二级联动

项目需求根据不同的日期选择不同的时间段实现二级联动 日期的返回数据

时间段的返回数据

     <input type="text" placeholder="请选择日期" id='date'>
     <div id='eloct'>
     	<input type="text" placeholder="请选择时段">
     </div>
        //获取日期信息
        $.ajax({
            url: url,
            type: "post",
            data: { key: key, type: 'getFlashSignInfo' },
            dataType: 'json',
            success: function (res) {
                if (res.status == 1) {
                    for (let i = 0; i < res.data.date.length; i++) {
                        $("#date").picker({
                            title: "请选择日期",
                            cols: [{
                                textAlign: 'center',
                                values: res.data.date
                            }],
                            //点击完成或关闭picker获取时间段信息
                            onClose: function (picker) {
                                console.log(picker)
                                dataTime(picker.value[0])
                            },
                        });
                    }
                } else {
                    $.toptip(res.msg, 'error');
                }
            }
        })
        //获取时间段
         function dataTime(appDate) {
            $.ajax({
                url: url,
                type: "post",
                data: {
                    key: key,
                    type: 'getFlashTimeInfo',
                    data: { 'appDate': appDate },
                },
                dataType: 'json',
                success: function (res) {
                    if (res.status == 1) {
                        list = []
                        for (let i = 0; i < res.data.length; i++) {
                            list.push(res.data[i].app_time);
                        }
                        $("#eloct").html(`<input type="text" placeholder="请选择时段" id='period'/>`)
                        $("#period").picker({
                            title: "请选择时段",
                            cols: [{
                                textAlign: 'center',
                                values: list
                            }],
                        });
                    }
                }
            })
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js微信公众号引JS-SDK调起微信支付

    wePanda
  • 微信小程序处理图片加载失败显示默认图片

    微信小程序image组件有个binderror事件专门用来处理图片加载失败的问题,我们只需要传个下标去获取相应的图片位置

    wePanda
  • 微信小程序子组件向父组件传值

    wePanda
  • 【干货】机器算法学习感悟(下)

    今天的内容是续接昨天的,请喜欢的亲们一如既往的支持! (…………续) 第二个是KNN。KNN将测试集的数据特征与训练集的数据进行特征比较,然后算法提取样本集中特...

    机器学习AI算法工程
  • Java基础系列(二十五):接口进阶

    在前面章节的学习中,我们对于接口和抽象类都已经有了一个大概的理解和消化,现在我们将从语法层面和设计层面两个方向来分析它们到底有什么不同:

    山禾说
  • 扒虫篇-苹果审核被拒原因小汇

    很多时候,我们的美美滴开发完了,并测试完成之后准备打包上传到APPStore,却发现被拒绝了,各种各样的理由让我们触不及防,一直想整理汇总一下却一直因为各种事耽...

    進无尽
  • 女神节 | 程序员如何低调而又不失逼格

    今天。。。是一个非常重要的日子-女神节。作为一名程序员,如何向心仪的人低调而又不失逼格的表达祝福,关系到我们后半生的幸福,祝福的到位,普通朋友加个字变成女朋友,...

    老孟Flutter
  • echart拓扑图实现过程

    具体说我一个月没有更新博客了,也没啥解释的了,都是我的问题,关于这个拓扑图实现过程中有什么问题,可以私信我,或者下面评论!看到了我都会回复的!

    何处锦绣不灰堆
  • 深入理解Java的接口和抽象类(转)

      对于面向对象编程来说,抽象是它的一大特征之一。在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类。这两者有太多相似的地方,又有太多不同的地方。很...

    Dar_Alpha
  • 深入理解Java的接口和抽象类

    对于面向对象编程来说,抽象是它的一大特征之一。在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类。这两者有太多相似的地方,又有太多不同的地方。很多人...

    三哥

扫码关注云+社区

领取腾讯云代金券