zoukankan      html  css  js  c++  java
  • weui中的picker使用js进行动态绑定数据

    解决方案; 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: ['前置摄像头', '后置摄像头', '前+后摄像头']
                       }
                  ]
             });
         }
    });
    

      

  • 相关阅读:
    tomcat最大线程数的设置(转)
    webService接口大全
    实用工具网站汇总
    Linux常用指令(待补充)
    svn的使用总结(待补充)
    养生
    nodejs知识结构
    NVM node版本管理工具的安装和使用
    MongoDB安装和MongoChef可视化管理工具的使用
    JavaScript模块化编程(三)
  • 原文地址:https://www.cnblogs.com/changhuiming/p/11803079.html
Copyright © 2011-2022 走看看