解决方案; 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进行动态绑定数据问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
© 版权声明
THE END
暂无评论内容