时代Java，与您同行！关注微信公众号，关注前沿技术，微信搜索：nowjava或时代Java，也可点击这里扫码关注

时代Java

WeUI 实现联动选择器的实例，不使用其它插件。

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于实例源码

735

WeUI 实现联动选择器的实例

不使用其它插件，纯官方WeUI。

实例源码：

源代码：

执行

执行中...

<!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,viewport-fit=cover">
    <title>WeUI 实现联动选择器的实例</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/weui/2.3.0/style/weui.min.css"/>
</head>
<body ontouchstart><br/><br/>
<a href="javascript:" class="weui-btn weui-btn_default" id="NowJavaPicker">联动选择器</a>

<script src="https://libs.cdnjs.net/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript">
$('#NowJavaPicker').on('click', function () {
    	weui.picker([
    		{
    		    label: '一年级',
    		    value: 0,
    		    children: [
    		        {
    		            label: '王小二',
    		            value: 1
    		        },
    		        {
    		            label: '张三',
    		            value: 2
    		        }
    		    ]
    		},
    		{
    		    label: '二年级',
    		    value: 1,
    		    children: [
    		        {
    		            label: '李小四',
    		            value: 1,
    		            disabled: true // 不可用
    		        },
    		        {
    		            label: '王五',
    		            value: 2
    		        },
    		        {
    		            label: '杨六',
    		            value: 3
    		        }
    		    ]
    		},
    		{
    		    label: '三年级',
    		    value: 3,
    		    children: [
    		        {
    		            label: '李子',
    		            value: 1
    		        },
    		        {
    		            label: '孔雀',
    		            value: 2
/**代码未完, 请加载全部代码(NowJava.com).**/

编辑/阅读全部代码

执行结果：

<!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,viewport-fit=cover">
    <title>WeUI 实现联动选择器的实例</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/weui/2.3.0/style/weui.min.css"/>
</head>
<body ontouchstart><br/><br/>
<a href="javascript:" class="weui-btn weui-btn_default" id="NowJavaPicker">联动选择器</a>

<script src="https://libs.cdnjs.net/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript">
$('#NowJavaPicker').on('click', function () {
    	weui.picker([
    		{
    		    label: '一年级',
    		    value: 0,
    		    children: [
    		        {
    		            label: '王小二',
    		            value: 1
    		        },
    		        {
    		            label: '张三',
    		            value: 2
    		        }
    		    ]
    		},
    		{
    		    label: '二年级',
    		    value: 1,
    		    children: [
    		        {
    		            label: '李小四',
    		            value: 1,
    		            disabled: true // 不可用
    		        },
    		        {
    		            label: '王五',
    		            value: 2
    		        },
    		        {
    		            label: '杨六',
    		            value: 3
    		        }
    		    ]
    		},
    		{
    		    label: '三年级',
    		    value: 3,
    		    children: [
    		        {
    		            label: '李子',
    		            value: 1
    		        },
    		        {
    		            label: '孔雀',
    		            value: 2
    		        }
    		    ]
    		}
    		], {
    			 defaultValue: [0, 1],
    		   onChange: function (result) {
    		       console.log(result)
    		   },
    		   onConfirm: function (result) {
    		       console.log(result)
    		   },
    		   title: '时代Java学校'
    		});
    });
</script>
</body>
</html>

本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。

编辑于 2020-09-25 21:26:512020-09-25 21:26:51

实例源码

实例源码订阅