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

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

WEUI picker组件无法js动态改变选项相关推荐

转载：WeUI Picker组件--源码分析
原文链接:WeUI Picker组件源代码分析 https://www.cnblogs.com/haha1212/p/8393243.html 前言:由于最近做的一个移动端项目需要用到类似WeUI ...
html动态资源加载进度,JavaScript_快速解决js动态改变dom元素属性后页面及时渲染的问题，今天实现一个进度条加载过程 - phpStudy...
快速解决js动态改变dom元素属性后页面及时渲染的问题今天实现一个进度条加载过程,dom结构其实就是两个div 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文 ...
解决js动态改变dom元素属性后页面及时渲染问题
解决js动态改变dom元素属性后页面及时渲染问题参考文章: (1)解决js动态改变dom元素属性后页面及时渲染问题 (2)https://www.cnblogs.com/fangsmile/p/49 ...
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
随机变速的动态打字特效–最终效果随机变速的动态打字特效–完整代码 <template><div class="contentBox"><span&g ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize
rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...
js动态改变css样式
动态改变页面元素样式: 使用getElement系列方法访问元素. 改变样式属性:style属性:className属性. <!DOCTYPE html> <html>< ...
使用js动态改变input的只读属性
使用js动态改变input的只读属性写一个网页需要动态改变input的只读属性,看了很多博客改了很多次代码但没报错也没实现功能.写个博客记录一下. 在input标签里设置只读属性, <inpu ...
js动态改变下拉菜单内容示例 .
<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=java ...

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

WEUI picker组件无法js动态改变选项相关推荐

最新文章

热门文章