weui中的picker使用js进行动态绑定数据问题


Posted in Javascript onNovember 06, 2019

解决方案; picker和Select组件是通过input标签绑定,可以先通过input的父级元素移除input标签,重新插入input标签,最后重新初始化picker或Select组件。

<div class="weui-cell">
        <div class="weui-cell__hd"><label for="time-format" class="weui-label">性别</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input " id="appl_sex" name="appl_sex" type="text" value="">
        </div>
      </div>
<div id="box">
   <input type="text" id='camera' value="前置摄像头"/>
</div>

js代码:

$("#appl_sex").picker({
  title: "请选择",
  cols: [
    {
      textAlign: 'center',
      values: ["1",'2']
    }
  ],
  onChange: function(p, v, dv) {
    console.log(p, v, dv);
  },
  onClose: function(p, v, d) {
    console.log("close");
  }
});
$('#appl_sex').change(function () {
  /*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根据具体的项目而定*/
  var val = $("#appl_sex").val();
  if (val == "1") {
     $("#box").empty();
     $("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
     $("#camera").picker({
       title: "请选择摄像头",
       cols: [
          {
            textAlign: 'center',
            values: ['前置摄像头']
          }
       ]
     });
   } else {
     $("#box").empty();
     $("#box").html("<input type='text' id='camera' value='前置摄像头'/>");
     $("#camera").picker({
       title: "请选择摄像头",
       cols: [
          {
            textAlign: 'center',
            values: ['前置摄像头', '后置摄像头', '前+后摄像头']
          }
       ]
     });
   }
});

ps:weui之Picker的使用教程

这个问题调试了很久,因为调用example.js时没问题,一移开就失效,一度觉得很诡异。

经过多次测试,才发现,是zepto.min.js的次序放错了,应该放到头部。

完整的代码:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>WeUI</title>
  <link rel="stylesheet" href="./weui.css"/>
 <script src="./zepto.min.js"></script>
</head>
<body ontouchstart>
<div class="page">
  <div class="page__bd page__bd_spacing">
    <a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>
  </div>
</div>
<script type="text/javascript">
  $('#showPicker').on('click', function () {
    weui.picker([{
      label: '飞机票',
      value: 0
    }, {
      label: '火车票',
      value: 1
    }, {
      label: '的士票',
      value: 2
    },{
      label: '公交票 (disabled)',
      disabled: true,
      value: 3
    }, {
      label: '其他',
      value: 4
    }], {
      onChange: function (result) {
        console.log(result);
      },
      onConfirm: function (result) {
        console.log(result);
      }
    });
  });
</script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script src="./weui.min.js"></script>
</body>
</html>

总结

以上所述是小编给大家介绍的weui中的picker使用js进行动态绑定数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
关于JavaScript轮播图的实现
Nov 20 Javascript
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 #Javascript
vue项目强制清除页面缓存的例子
Nov 06 #Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 #Javascript
JS实现随机抽取三人
Nov 06 #Javascript
Node对CommonJS的模块规范
Nov 06 #Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php实现插入排序
2015/03/29 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现决策树ID3算法的示例代码
2018/05/30 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python实现猜数字游戏
2020/03/25 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
校园环保建议书
2014/05/14 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript