WEUI picker组件无法js动态改变选项

功能需求

设备号和摄像头都可以下拉选择，但是具体的摄像头下拉选项是根据设备号而定的。如下图，尾号为352的设备号只有前置摄像头，尾号为657的设备号前置和后置摄像头都有。

问题说明

一般情况下，这个需求很简单，当选择设备号的时候js动态改变摄像头选项里面的值就可以了，但是WEUI picker和Select组件都不支持动态改变选项，只支持初始赋值。

解决方案

因为picker和Select组件是通过input标签绑定，可以先通过input的父级元素移除input标签，重新插入input标签，最后重新初始化picker或Select组件。

核心代码

<!--页面部分-->
<div id="box">
      <input type="text" id='camera' value="前置摄像头"/>
</div>

/*js部分，myPicker是设备号input的ID*/
$('#myPicker').change(function () {
    /*选择设备号后,根据当前设备号设置不同的摄像头选项,具体判断逻辑根据具体的项目而定*/
    var val = $("#myPicker").val();
    if (val === "*******352") {
         $("#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: ['前置摄像头', '后置摄像头', '前+后摄像头']
                   }
              ]
         });
     }
});

今天就分享到这里，文中表述仅代表个人观点，有问题欢迎留言交流，或关注楼主微信公众号：上班熊的环球梦。